/* tools/working-from-home/index.html's own CSS, extracted from its inline
 * <style> (Task 11): the two-column "deck" comparison layout, entirely
 * bespoke to this page.
 *
 * This page does NOT link tools/_shared/flow.css. It was tried, to dedupe
 * *{box-sizing:border-box}, .skip-link and the tool-top:css:start/end
 * block, all byte-identical to flow.css's own copies. It leaked on six
 * more selectors this page shares by name with flow.css (main, .highlight,
 * .field label, .bar-fill, .bar-val, .footer-top, .footer-copy), and even
 * after per-property overrides for all of them the page still measured
 * 458px (0.0091%) different from before. Reverted to keep this page's own
 * full copy of the shared bits instead, verified pixel-identical. See
 * tools/salary-dividend-pension/salary-dividend-pension.css for the fuller
 * account of the same decision, on the page where the leaks were large
 * enough to pin down by name.
 */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.6;-webkit-font-smoothing:antialiased;padding-top:4.5rem}

.skip-link{position:absolute;left:-999px;top:0;background:var(--orange);color:var(--paper);padding:.6rem 1rem;z-index:100;font-weight:600;text-decoration:none}
.skip-link:focus{left:1rem;top:1rem}

/* Nav rules moved to /assets/chrome.css on 2026-09-01. */

/* Marker wash (HighlightText). Two overlapping strokes, each displaced by its
   own feTurbulence filter, so the edges read as two passes of a pen rather
   than a rectangle. inline-block plus nowrap is load-bearing: the strokes are
   absolutely positioned inside the span and streak vertically if it wraps,
   which is why the wash sits on a short phrase and never a whole line. */
.highlight{position:relative;display:inline-block;background:transparent;padding:0 .12em;white-space:nowrap;z-index:0;color:var(--ink)}
.highlight::before,.highlight::after{content:"";position:absolute;background:var(--orange-soft);z-index:-1;pointer-events:none;opacity:.7}
.highlight::before{left:-.08em;right:.06em;top:-.12em;bottom:.2em;filter:url(#marker-rough)}
.highlight::after{left:.06em;right:-.08em;top:.15em;bottom:-.08em;filter:url(#marker-rough-2)}

/* Layout ----------------------------------------------------------------- *
 * The tool runs wider than the prose beneath it, deliberately. Two columns of
 * inputs need the room; a paragraph read at the same width would run to about
 * ninety characters a line, which is why "the working" keeps the 46rem measure
 * every other tool page uses rather than being stretched to match. */
.wrap{max-width:52rem;margin:0 auto;padding:2.5rem 1.5rem 1rem}
.measure{max-width:34rem}

.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);margin:0 0 .9rem}
h1{font-family:var(--font-display);font-size:clamp(1.9rem,5.2vw,2.55rem);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:0 0 .85rem;text-wrap:balance}
.lede{font-size:1.05rem;line-height:1.55;color:var(--ink-2);margin:0 0 1rem}

/* Who the page is not for. Quiet, but above the fold rather than folded away,
   because a sole trader following a director's rules gets a wrong answer. */
.audience{font-size:.88rem;line-height:1.5;color:var(--ink-muted);margin:0 0 2.6rem;padding-left:.85rem;border-left:2px solid var(--rule-soft)}

/* The deck ---------------------------------------------------------------- *
 * The two routes ARE the two objects on screen. You fill a card in and that
 * same card wins or loses, so there is no separate results panel repeating the
 * figures you just produced. Each card takes its own height, because forcing
 * them equal left the one-input card with a void down its middle. */
.deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;align-items:start;margin:0 0 2.2rem}

.card{position:relative;display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--paper-edge);border-radius:14px;padding:1.5rem 1.35rem 1.35rem;transition:border-color .3s var(--ease-ink),background .3s var(--ease-ink),box-shadow .3s var(--ease-ink)}
.card.win{border-color:var(--orange);background:var(--orange-pale)}

.card-kicker{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .5rem}
.card.win .card-kicker{color:var(--orange-deep)}
.card-sell{font-size:.92rem;line-height:1.5;color:var(--ink-2);margin:0 0 1.35rem}

/* The winner badge is a .badge-stamped from /assets/drawn-controls.css, which
   paints the stamp; this rule only places it. Absolute so it never changes the
   card's height when it appears, which would make the pair jump every time a
   figure crosses over.

   Both display rules are compound on purpose. .badge-stamped sets
   display:inline-block at specificity (0,1,0) and drawn-controls.css loads
   AFTER this block, so a bare .badge{display:none} would lose on source order
   and the badge would sit on both cards at once. */
.card .badge{position:absolute;top:1.1rem;right:1.1rem;display:none}
.card.win .badge{display:inline-block}

/* Three figures that give the flat rate card something to look at, since it
   only has one input and would otherwise sit half empty beside its neighbour. */
.trio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0 0 1.5rem}
.trio div{background:rgba(240,233,220,.6);border-radius:8px;padding:.6rem .4rem;text-align:center}
.card.win .trio div{background:rgba(255,255,255,.42)}
.trio .tv{display:block;font-family:var(--font-display);font-size:1.15rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.trio .tl{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-top:.2rem}

.card-fields{display:grid;gap:.9rem;margin:0 0 1.1rem}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink-2);margin:0 0 .3rem;line-height:1.3}
.field .hint{display:block;font-size:.755rem;font-weight:400;color:var(--ink-muted);line-height:1.4;margin-top:.1rem}

.input-money{position:relative;display:block}
.input-money::before{content:"£";position:absolute;left:.7rem;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:.9rem;color:var(--ink-muted);pointer-events:none}

input[type=number]{width:100%;font:inherit;font-family:var(--font-mono);font-size:.94rem;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--paper);border:1px solid var(--paper-edge);border-radius:8px;padding:.52rem .7rem;transition:border-color .18s var(--ease-ink)}
input[type=number]:hover{border-color:var(--rule-soft)}
input[type=number]:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
/* Two selectors rather than one, because a bare .input-money input ties with
   the rule above on specificity and then loses on source order, so the padding
   shorthand wipes it out and the pound sign lands on top of the digit. */
.input-money input[type=number]{padding-left:1.75rem}

.card-do{font-size:.8rem;line-height:1.5;color:var(--ink-muted);margin:0 0 1.1rem}

/* What the payment is worth set against a dividend, which is genuinely about
   the flat rate and gives that card something to carry beyond its one input. */
.card-note{background:rgba(240,233,220,.55);border-radius:10px;padding:.85rem .95rem;margin:0 0 1.2rem}
.card.win .card-note{background:rgba(255,255,255,.4)}
.cn-head{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .4rem}
.card-note p{font-size:.82rem;line-height:1.5;color:var(--ink-2);margin:0}
.cn-controls{margin-top:.6rem !important;color:var(--ink-muted) !important;font-size:.78rem !important}
.cn-controls select{font-size:.78rem;padding:.12rem 1.35rem .12rem .4rem;background-position:right .45rem center}

/* .btn-example is a .btn-drawn.is-quiet.is-block in the markup */
.btn-example{margin:0 0 1.1rem}

/* Pinned to the bottom of whatever height the card ends up taking. */
.card-foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule-soft);display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.card.win .card-foot{border-top-color:var(--orange-deep)}
.foot-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1.35}
.foot-amt{font-family:var(--font-display);font-size:clamp(1.7rem,5vw,2.2rem);font-weight:600;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Verdict ----------------------------------------------------------------- */
.verdict-line{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .7rem}
h2.headline{font-family:var(--font-display);font-size:clamp(1.7rem,4.4vw,2.3rem);font-weight:600;line-height:1.18;letter-spacing:-.02em;margin:0 0 1.6rem;text-wrap:balance;max-width:30ch}
h2.headline .fig{color:var(--orange-deep);white-space:nowrap}

/* The bar ----------------------------------------------------------------- *
 * The one data-driven figure the brand allows per screen. It exists to make a
 * single argument visible, which is that HMRC's own worked example does not
 * clear the flat rate, so most people are not going to either. */
.bar-block{border-left:3px solid var(--orange);border-radius:0 10px 10px 0;background:var(--paper-2);padding:1.2rem 1.35rem 1.4rem;margin:0 0 1.1rem}
.bar-block .bl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 .8rem}
.bar-track{position:relative;height:2.6rem;background:var(--paper-3);border-radius:6px;overflow:visible;margin:0 0 3.1rem}
.bar-fill{position:absolute;left:0;top:0;bottom:0;background:var(--orange-soft);border-radius:6px 3px 3px 6px;transition:width .4s var(--ease-ink)}
.bar-fill.over{background:var(--orange)}
.bar-mark{position:absolute;top:-.35rem;bottom:-.35rem;width:2px;background:var(--ink)}
.bar-mark.soft{background:var(--ink-faded);width:1px}
.bar-mark span{position:absolute;top:calc(100% + .3rem);left:0;transform:translateX(-50%);font-family:var(--font-mono);font-size:.63rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;line-height:1.3}
.bar-mark.soft span{color:var(--ink-muted);top:calc(100% + 1.35rem)}
/* A centred label runs off the container once its mark passes about two thirds
   of the track, so past that point it hangs to the left of the mark instead. */
.bar-mark.at-end span{left:auto;right:0;transform:none;text-align:right}
.bar-val{position:absolute;top:50%;transform:translateY(-50%);left:.7rem;font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.bar-note{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-2)}

select{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--paper-edge);border-radius:6px;padding:.2rem 1.6rem .2rem .5rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23B8431A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .55rem center}
select:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* CTA and FAQ ------------------------------------------------------------- */
.cta{max-width:46rem;margin:2.5rem auto 0;padding:2rem 1.5rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cta p{margin:0;color:var(--ink-2);font-size:1rem;line-height:1.65}
/* .btn-primary is a .btn-drawn in the markup */ .btn-primary{margin-top:1.1rem;text-decoration:none}

/* Emailing the result. Deliberately quieter than the CTA below it: the answer
   is already fully on screen by the time anyone reaches this, so the block is
   an offer rather than a gate, and it never withholds a figure to earn an
   address. The row collapses to a single column on a narrow phone, where a
   side by side input and button leave the input too short to read. */
.send{max-width:46rem;margin:2.5rem auto 0;padding:0 1.5rem}
.send h2{font-family:var(--font-display);font-size:1.35rem;font-weight:600;line-height:1.25;margin:0 0 .4rem;color:var(--ink)}
.send p{margin:0;color:var(--ink-muted);font-size:.95rem;line-height:1.6}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:.95rem 0 0}
.send-row .field{flex:1 1 12rem;min-width:12rem}
.send input[type=email]{width:100%;font:inherit;font-size:.94rem;color:var(--ink);background:var(--paper);border:1px solid var(--paper-edge);border-radius:8px;padding:.52rem .7rem;transition:border-color .18s var(--ease-ink)}
.send input[type=email]:hover{border-color:var(--rule-soft)}
.send input[type=email]:focus{outline:2px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
/* Honeypot. Off screen rather than display:none, because some bots skip a
   field they can see is hidden and fill one they cannot. */
.send .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.send-msg{font-size:.88rem;line-height:1.5;margin:.8rem 0 0;color:var(--ink-muted);min-height:1.3em}
.send-msg.ok{color:var(--status-ok,#4A6B3E)}
.send-msg.no{color:var(--orange-deep)}
@media (max-width:34rem){.send-row .field{flex:1 1 100%}.send-row .btn-drawn{width:100%}}

.faq-section{max-width:46rem;margin:0 auto;padding:2rem 1.5rem .5rem}
.table-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 1.25rem}
.faq{border-top:1px solid var(--rule-soft);padding-top:1.1rem;margin-top:1.1rem}
.faq h3{font-family:var(--font-display);font-weight:500;font-size:1.15rem;margin:0 0 .4rem;color:var(--ink)}
.faq p{color:var(--ink-muted);margin:0}

/* Used inside "the working", which is generated into this page from
   scripts/tool-working-content-tax.js and styled by /tools/_shared/working.css.
   These two are the additions that file does not carry. */
.pull{font-family:var(--font-display);font-size:1.05rem;line-height:1.5;color:var(--ink);border-left:2px solid var(--orange-soft);padding-left:.9rem;margin:0 0 .9rem}
.working-table tr.total td{font-weight:600;border-bottom:2px solid var(--ink)}

/* Footer ------------------------------------------------------------------ */
footer{max-width:46rem;margin:3rem auto 0;padding:2.5rem 1.5rem 2rem;border-top:1px solid var(--rule);color:var(--ink-muted);font-size:.9rem}
.footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
@media (min-width:640px){.footer-top{flex-direction:row;align-items:center;justify-content:space-between}}
.footer-wordmark{height:20px;width:auto;display:block}
.footer-links{display:flex;flex-wrap:wrap;gap:1.1rem}
footer a{color:var(--ink);text-decoration:none}
footer a:hover{color:var(--orange)}
.footer-copy{margin:0;line-height:1.6}

/* Responsive -------------------------------------------------------------- */
@media (max-width:46rem){
  .wrap{max-width:34rem}
  /* minmax(0,1fr) rather than a bare 1fr, for the same reason the two column
     rule uses it. A grid item's min-width defaults to auto, so a bare 1fr track
     grows to the item's min-content width instead of the container's, and one
     unbreakable run of text inside a card then pushes the whole page sideways.
     Measured at 390px before this line existed: the track resolved to 384px
     against a 342px container and the document scrolled horizontally. */
  .deck{grid-template-columns:minmax(0,1fr);gap:.9rem}
  /* Stacked, the badge is the only thing telling you which one won, so the
     winning card comes first rather than leaving it below the fold. */
  .card.win{order:-1}
}
@media (max-width:34rem){
  .trio .tv{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}

/* tool-top:css:start */
/* Every tool is entered from the toolbox, so every tool owes the visitor one
   obvious way back to it and one line saying what they came here for. */
.tool-top{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.15rem;
  margin:0 0 1.9rem;padding:0 0 1.15rem;border-bottom:1px solid var(--rule-soft,#B3A887)}
.tool-back{display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-family:var(--font-sans,"Plus Jakarta Sans",-apple-system,system-ui,sans-serif);
  font-size:.95rem;font-weight:600;text-decoration:none;line-height:1;min-height:48px;
  color:var(--orange-deep,#B8431A);background:transparent;
  border:2px solid var(--orange,#DF5911);padding:.75rem 1.35rem;border-radius:5px;
  transition:background .15s,color .15s,transform .15s}
.tool-back i{font-style:normal;font-size:1.05em;line-height:1}
.tool-back:hover,.tool-back:focus-visible{background:var(--orange-wash,rgba(223,89,17,0.18));color:var(--ink,#141414);transform:translateX(-2px)}
.tool-back:focus-visible{outline:2px solid var(--orange,#DF5911);outline-offset:3px}
.tool-what{margin:0;flex:1 1 21rem;min-width:0;
  font-family:var(--font-display,Newsreader,Georgia,serif);
  font-size:1.02rem;line-height:1.4;color:var(--ink-2,#2A2724)}
@media (max-width:34rem){
  .tool-what{flex-basis:100%;font-size:.95rem}
  .tool-back{width:100%;justify-content:center;min-height:54px;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.tool-back{transition:background .15s,color .15s}
  .tool-back:hover,.tool-back:focus-visible{transform:none}}
/* tool-top:css:end */