/* ===================================================================
   du-tools — the shared contract's skin, plus the take-home face.
   Enqueued on tool pages only (inc/du-tools.php).

   THE TOOL SITS ON THE ARTICLE PANE, which on every Dutch Uncles post
   is deep sepia glass with cream type (`body.du-cone-page .lde-glass`
   in style.css sets --lde-fg, --lde-lip and --lde-pillar-on-glass for
   exactly this surface). So every colour here is a token that rule
   already governs, or a palette preset from theme.json. No new hex is
   introduced except where a segment colour is named once as a token.

   NOTHING HERE ANIMATES A VALUE. There are no transitions on any
   number, bar or width: the result is replaced, not revealed. The one
   motion-adjacent property is the focus ring, which is instantaneous.
   =================================================================== */

.du-tool {
  --du-seg-net: var(--wp--preset--color--teal-bright, #1D9E75);   /* what you keep */
  --du-seg-pension: var(--wp--preset--color--teal-tint, #DCEFE6); /* also yours, later */
  --du-seg-tax: var(--wp--preset--color--coral, #D85A30);         /* gone */
  --du-seg-ni: #A79EE8;                                            /* Investing's on-dark ink */
  --du-seg-sl: rgba(var(--lde-cream-rgb), .55);
  --du-field-bg: rgba(0, 0, 0, .26);
  --du-field-border: rgba(255, 236, 214, .30);
  --du-rule: rgba(255, 236, 214, .18);
  --du-go: var(--wp--preset--color--yellow, #FDFF00);
  --du-go-ink: var(--wp--preset--color--contrast, #1C1C1A);
  margin: 2rem 0 2.5rem;
  font-family: var(--wp--preset--font-family--ui, Inter, sans-serif);
  color: var(--lde-fg, #F5F0E8);
  container-type: inline-size;
}

/* ---------------------------------------------------------------- form */

.du-tool__form {
  display: grid;
  gap: 1.1rem;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--du-rule);
  border-radius: 14px;
  background: rgba(0, 0, 0, .14);
}
.du-tool__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.du-tool__group + .du-tool__group { padding-top: .9rem; border-top: 1px solid var(--du-rule); }
.du-tool__q {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 .55rem;
  padding: 0;
}
.du-tool__sub { font-size: .9rem; opacity: .9; }

.du-tool__money {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.35rem;
  font-weight: 600;
}
.du-tool__money > span:first-child { opacity: .8; }
.du-tool__unit { font-size: .9rem; font-weight: 400; opacity: .8; }

.du-tool input[type="number"],
.du-tool select {
  font: inherit;
  color: inherit;
  background: var(--du-field-bg);
  border: 1px solid var(--du-field-border);
  border-radius: 8px;
  padding: .45rem .65rem;
  min-height: 2.6rem;
  max-width: 100%;
}
.du-tool__money input[type="number"] {
  width: 9.5ch;
  font-size: 1.35rem;
  font-weight: 600;
  padding: .4rem .6rem;
}
.du-tool select { padding-right: 1.6rem; }
.du-tool input:focus-visible,
.du-tool select:focus-visible,
.du-tool button:focus-visible,
.du-tool summary:focus-visible {
  outline: 2px solid var(--lde-focus, #F5F0E8);
  outline-offset: 2px;
}

.du-tool__choices { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.du-tool__choices--stack { flex-direction: column; gap: .45rem; }
.du-tool__choice {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .95rem;
  line-height: 1.35;
  cursor: pointer;
}
.du-tool__choice input { margin: .2rem 0 0; accent-color: var(--du-seg-net); flex: none; }

.du-tool__inline { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: .8rem; }
.du-tool__inline input[type="number"] { width: 8ch; }

.du-tool__note {
  font-size: .85rem;
  line-height: 1.45;
  opacity: .82;
  margin: .7rem 0 0;
}

.du-tool__actions { display: grid; gap: .6rem; }
.du-tool__go {
  justify-self: start;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  color: var(--du-go-ink);
  background: var(--du-go);
  border: 0;
  border-radius: 999px;
  padding: .7rem 1.4rem;
  cursor: pointer;
}
/* Live: the sum runs on every change, so the button is the no-JS path
   and a reassurance. It stays, smaller, so the contract reads the same
   with or without script. */
.du-tool[data-du-state="result"] .du-tool__go { font-size: .9rem; padding: .5rem 1.1rem; }

/* -------------------------------------------------------------- result */

.du-tool__result { margin-top: 1.4rem; }

.du-tool__headline {
  display: grid;
  gap: .9rem;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--du-rule);
  background: rgba(0, 0, 0, .22);
}
.du-tool__figure { display: grid; gap: .15rem; }
.du-tool__label { font-size: .9rem; letter-spacing: .02em; text-transform: uppercase; opacity: .85; }
.du-tool__big {
  font-family: var(--wp--preset--font-family--display, Inter, sans-serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 9cqi, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.du-tool__per { font-size: .95rem; opacity: .9; }
.du-tool__per b { font-weight: 600; }

/* THE RISK LINE IS ADJACENT TO THE NUMBER, inside the same box, above
   the working and the footer, and it is not smaller than the body
   copy around it. Framework §2: not in a footer, not obscured by
   prominence. */
.du-tool__risk {
  margin: .8rem 0 0;
  font-size: .92rem;
  line-height: 1.45;
  padding-left: .8rem;
  border-left: 3px solid var(--lde-lip, #F5A07A);
}

.du-tool__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .7rem 1rem;
  margin: 1rem 0 0;
}
.du-tool__facts > div { display: grid; gap: .1rem; }
.du-tool__facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; }
.du-tool__facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.du-tool__facts .du-tool__next { grid-column: 1 / -1; padding-top: .6rem; border-top: 1px solid var(--du-rule); }
.du-tool__facts .du-tool__next dd { font-weight: 400; }
.du-tool__facts .du-tool__next b { font-weight: 600; }

/* The balance and the decline, on the result screen, under the facts: the money is deferred
   not lost, and what to do with the number is not a calculator's question (roadmap §5). */
.du-tool__decline {
  margin: .9rem 0 0;
  font-size: .92rem;
  line-height: 1.45;
}

/* ---------------------------------------------------------------- bar */

.du-tool__chart { margin: 1rem 0 0; }
.du-tool__bar { margin: 0; }
.du-tool__bar svg { display: block; border-radius: 6px; overflow: hidden; }
.du-seg { stroke: rgba(0, 0, 0, .35); stroke-width: 1; }
.du-seg--net { fill: var(--du-seg-net); }
.du-seg--tax { fill: var(--du-seg-tax); }
.du-seg--ni { fill: var(--du-seg-ni); }
.du-seg--sl { fill: var(--du-seg-sl); }
.du-seg--pension { fill: var(--du-seg-pension); }
.du-seg--cb { fill: var(--du-seg-tax); opacity: .7; }        /* Child Benefit clawed back: collected as tax */
.du-tool__legend {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.1rem;
  font-size: .88rem;
}
.du-tool__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.du-tool__legend i { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; }
.du-tool__legend .du-seg--net i { background: var(--du-seg-net); }
.du-tool__legend .du-seg--tax i { background: var(--du-seg-tax); }
.du-tool__legend .du-seg--ni i { background: var(--du-seg-ni); }
.du-tool__legend .du-seg--sl i { background: var(--du-seg-sl); }
.du-tool__legend .du-seg--pension i { background: var(--du-seg-pension); }
.du-tool__legend .du-seg--cb i { background: var(--du-seg-tax); opacity: .7; }
.du-tool__legend b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- curve */

.du-tool__money--small { font-size: 1.05rem; }
.du-tool__money--small input[type="number"] { font-size: 1.05rem; width: 9ch; }
.du-tool__curve { margin: 0; }
.du-tool__curve svg { display: block; overflow: visible; }
.du-curve__path { fill: none; stroke: var(--du-seg-net); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.du-curve__line { stroke: var(--du-seg-tax); stroke-width: 2; stroke-dasharray: 6 6; }
.du-curve__linelabel, .du-curve__melabel { fill: currentColor; font-size: 22px; font-weight: 600; }
.du-curve__tick, .du-curve__axis { fill: currentColor; font-size: 20px; opacity: .75; }
.du-curve__me { fill: var(--du-go); stroke: var(--du-go-ink); stroke-width: 2; }
.du-tool__caption { font-size: .85rem; line-height: 1.45; opacity: .85; margin-top: .5rem; }
@media print {
  .du-curve__path { stroke: #000; }
  .du-curve__line { stroke: #555; }
  .du-curve__me { fill: #fff; stroke: #000; }
}

/* ------------------------------------------------------------ warnings */

.du-tool__warnings {
  margin: 1rem 0 0;
  padding: .8rem 1rem .8rem 2.2rem;
  border-radius: 10px;
  background: rgba(216, 90, 48, .18);
  border: 1px solid rgba(245, 160, 122, .45);
  font-size: .92rem;
  line-height: 1.45;
}
.du-tool__blocked .du-tool__risk { border-left-color: var(--du-seg-tax); }

/* ------------------------------------------------------------- working */

.du-tool__working,
.du-tool__assumptions,
.du-tool__sources {
  margin: 1rem 0 0;
  border: 1px solid var(--du-rule);
  border-radius: 12px;
  overflow: hidden;
}
.du-tool summary {
  cursor: pointer;
  padding: .75rem 1rem;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.du-tool summary::-webkit-details-marker { display: none; }
.du-tool summary::before {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  flex: none;
  opacity: .8;
}
.du-tool details[open] > summary::before { transform: rotate(45deg); }
.du-tool details[open] > summary { border-bottom: 1px solid var(--du-rule); }

/* Wide content scrolls INSIDE its own box; the page never does. */
.du-tool__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.du-tool__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .9rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.du-tool__table th,
.du-tool__table td { padding: .5rem .8rem; text-align: left; vertical-align: top; border-top: 1px solid var(--du-rule); }
.du-tool__table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; opacity: .8; border-top: 0; }
.du-tool__table tbody th { font-weight: 500; }
.du-tool__num { text-align: right !important; white-space: nowrap; }
.du-tool__line--income th { font-weight: 600; }
.du-tool__line--pension td:nth-child(4),
.du-tool__line--allowance td:nth-child(4) { opacity: .85; }

/* -------------------------------------------------------------- footer */

.du-tool__footer { margin-top: 1rem; font-size: .88rem; line-height: 1.5; }
.du-tool__meta { margin: 0 0 .2rem; opacity: .9; }
.du-tool__footer ul { margin: 0; padding: .6rem 1rem .8rem 2rem; }
.du-tool__footer li + li { margin-top: .3rem; }
.du-tool__footer a { color: var(--lde-lip, #F5A07A); }
.du-tool__checked, .du-tool__unverified { font-size: .8rem; opacity: .75; }
.du-tool__unverified { color: var(--du-seg-tax); opacity: 1; }

.du-tool__share { margin: 1rem 0 0; font-size: .88rem; line-height: 1.5; }
.du-tool__sharebtn {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: transparent;
  border: 1px solid var(--du-field-border);
  border-radius: 999px;
  padding: .4rem .9rem;
  cursor: pointer;
}
.du-tool__sharenote { opacity: .8; }
.du-tool__shareout { display: block; word-break: break-all; margin-top: .3rem; }
.du-tool[data-du-state="static"] .du-tool__share { display: none; } /* needs the clipboard */

/* ----------------------------------------------------------- narrow */

@container (max-width: 480px) {
  .du-tool__form, .du-tool__headline { padding: 1rem; border-radius: 10px; }
  .du-tool__facts { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- print */

@media print {
  .du-tool { color: #000; --du-rule: #999; --du-field-border: #999; --du-field-bg: transparent; --du-seg-sl: #bbb; }
  .du-tool__form, .du-tool__headline { background: transparent; border-color: #999; }
  .du-tool__risk { border-left-color: #000; }
  .du-tool__go, .du-tool__share, .du-tool__note { display: none; }
  .du-tool details { border-color: #999; }
  .du-tool summary::before { display: none; }
  .du-tool details:not([open]) > summary { display: none; }
  .du-tool__scroll { overflow: visible; }
  .du-tool__table { min-width: 0; }
  .du-tool__footer a { color: #000; }
  .du-tool__footer a::after { content: " (" attr(href) ")"; font-size: .8em; }
  .du-tool__warnings { background: transparent; border-color: #000; }
}


/* ------------------------------------------------------------ rail pane
   "More tools" (du_tools_rail_pane): the other tools, then the hub. The
   pane is the chassis's `.lde-panel.lde-glass-soft`; only the list is
   ours, and it borrows the TOC's measure so the two read as one rail. */
.du-tools-pane__list {
  list-style: none;
  margin: 0;
  padding: .35rem 1rem .6rem;
  display: grid;
  gap: .45rem;
}
.du-tools-pane__i a {
  display: block;
  font-size: .92rem;
  line-height: 1.3;
  color: var(--lde-fg, inherit);
  text-decoration: none;
}
.du-tools-pane__i a:hover,
.du-tools-pane__i a:focus-visible { color: var(--lde-lip); text-decoration: underline; text-underline-offset: .12em; }
.du-tools-pane__all {
  margin: 0;
  padding: 0 1rem .9rem;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.du-tools-pane__all a { color: var(--lde-lip, inherit); text-decoration: none; }
.du-tools-pane__all a:hover { text-decoration: underline; }