/*
 * Toolbay component styles. Framework-agnostic: the same file is enqueued by
 * the WordPress template and pulled by the static preview harness, so what you
 * see in preview is what ships.
 */

* { box-sizing: border-box; }

body.tb {
  margin: 0;
  font-family: var(--tb-font);
  color: var(--tb-ink);
  background: var(--tb-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.tb-wrap { max-width: var(--tb-maxw); margin: 0 auto; padding: 0 1.1rem; }

.tb-site-head {
  border-bottom: 1px solid var(--tb-line);
  background: var(--tb-card);
}
.tb-site-head .tb-wrap { display: flex; align-items: center; gap: .6rem; height: 60px; }
.tb-logo { font-weight: 800; letter-spacing: -.02em; color: var(--tb-ink); text-decoration: none; font-size: 1.2rem; }
.tb-logo b { color: var(--tb-primary); }
.tb-nav { margin-left: auto; display: flex; gap: 1.1rem; }
.tb-nav a { color: var(--tb-ink-soft); text-decoration: none; font-size: .95rem; }
.tb-nav a:hover { color: var(--tb-primary); }

/* Breadcrumb */
.tb-crumb { font-size: .85rem; color: var(--tb-ink-faint); padding: 1rem 0 0; }
.tb-crumb a { color: var(--tb-ink-faint); text-decoration: none; }
.tb-crumb a:hover { color: var(--tb-primary); }

/* Page head */
.tb-hero { padding: .4rem 0 1.4rem; }
.tb-hero h1 { font-size: var(--tb-h1); line-height: 1.12; letter-spacing: -.02em; margin: .4rem 0 .5rem; }
.tb-hero .tb-lead { font-size: var(--tb-lead); color: var(--tb-ink-soft); margin: 0; max-width: 60ch; }

/* The tool card */
.tb-tool {
  background: var(--tb-card);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  box-shadow: var(--tb-shadow);
  padding: 1.3rem;
  margin: 0 0 1.6rem;
}
.tb-field-row { display: flex; flex-wrap: wrap; gap: var(--tb-gap); }
.tb-field { flex: 1 1 190px; display: flex; flex-direction: column; gap: .35rem; }
.tb-field label { font-size: .82rem; font-weight: 600; color: var(--tb-ink-soft); }
/* Every control in a field, not a list of types. Naming types individually
   meant text and search inputs (the countdown label, the word filter) fell
   through to browser defaults and sat next to styled date fields looking
   broken. */
.tb-field input,
.tb-field select,
.tb-field textarea {
  font: inherit;
  color: var(--tb-ink);
  background: var(--tb-paper);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-sm);
  padding: .6rem .7rem;
  min-height: 44px;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
/* the date picker indicator and search cancel button need appearance back */
.tb-field input[type="date"] { -webkit-appearance: revert; appearance: revert; }
.tb-field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: revert; }
.tb-field input::placeholder { color: var(--tb-ink-faint); }
.tb-field input:focus, .tb-field select:focus {
  outline: 2px solid var(--tb-primary);
  outline-offset: 1px;
  border-color: var(--tb-primary);
}

.tb-opts { display: flex; flex-wrap: wrap; gap: 1rem; margin: .9rem 0 .2rem; }
.tb-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--tb-ink-soft); }
.tb-check input { width: 17px; height: 17px; accent-color: var(--tb-primary); }

/* Result — the answer is the reason the page exists, so it is sized like it.
   Deliberately not a green "success" tint: nothing succeeded, a question got
   answered. The panel carries the colour and the number stays near-black. */
.tb-result {
  margin-top: 1.2rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--tb-primary-tint);
  border: 1px solid color-mix(in srgb, var(--tb-primary) 18%, transparent);
  border-radius: var(--tb-radius-sm);
}
.tb-result[hidden] { display: none; }
.tb-result .tb-headline {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 800; color: var(--tb-ink);
  letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.tb-result .tb-headline b { color: var(--tb-ink); font-weight: 800; }
/* The dates/weekday answers are words, not figures, so they need less size */
.tb-result .tb-headline:has(> b:only-child:not(:empty)) { letter-spacing: -.02em; }

.tb-breakdown { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .95rem; }
.tb-chip {
  font-size: .85rem; color: var(--tb-ink-soft);
  background: var(--tb-card); border: 1px solid var(--tb-line);
  border-radius: 999px; padding: .32rem .75rem;
}
.tb-chip b { color: var(--tb-ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.tb-error { color: var(--tb-accent); font-size: .9rem; margin-top: .6rem; }
.tb-error[hidden] { display: none; }
.tb-hint { color: var(--tb-ink-faint); font-size: .92rem; margin: 1.1rem 0 0; }
.tb-hint[hidden] { display: none; }

/* Editorial furniture */
.tb-prose { margin: 2rem 0; }
.tb-prose h2 { font-size: var(--tb-h2); letter-spacing: -.01em; margin: 1.8rem 0 .6rem; }
.tb-prose p { margin: .7rem 0; color: var(--tb-ink); }
.tb-prose ul { margin: .6rem 0; padding-left: 1.2rem; color: var(--tb-ink); }
.tb-prose li { margin: .3rem 0; }
/* There is no global link colour: every component sets its own, so anything
   that forgets falls back to the browser's 1996 blue. Prose links did. */
.tb-prose a { color: var(--tb-primary); }
.tb-prose a:hover { text-decoration: none; }
.tb-example {
  background: var(--tb-primary-tint);
  border-left: 3px solid var(--tb-primary);
  border-radius: var(--tb-radius-sm);
  padding: .9rem 1.1rem; margin: 1rem 0;
}
.tb-example p { margin: .3rem 0; }

/* FAQ */
.tb-faq details {
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-sm);
  padding: .2rem .95rem; margin: .55rem 0; background: var(--tb-card);
}
.tb-faq summary { cursor: pointer; font-weight: 600; padding: .6rem 0; list-style: none; }
.tb-faq summary::-webkit-details-marker { display: none; }
.tb-faq summary::after { content: "+"; float: right; color: var(--tb-primary); font-weight: 700; }
.tb-faq details[open] summary::after { content: "\2212"; }
.tb-faq details p { margin: 0 0 .8rem; color: var(--tb-ink-soft); }
/* Links inside answers. Easy to miss: a collapsed <details> hides them, so
   browser-blue links sat in the FAQs without ever showing up on screen. */
.tb-faq a { color: var(--tb-primary); }

/* Byline / methodology */
.tb-byline { font-size: .85rem; color: var(--tb-ink-faint); border-top: 1px solid var(--tb-line); padding-top: 1rem; margin-top: 2rem; }
.tb-byline a { color: var(--tb-primary); }
/* The date, where a reader can see it. Quiet: it is a fact about the page, not
   a claim about the page. */
.tb-checked { font-size: .8rem; color: var(--tb-ink-faint); margin: .4rem 0 0; }

.tb-site-foot { border-top: 1px solid var(--tb-line); margin-top: 3rem; background: var(--tb-card); }
.tb-site-foot .tb-wrap { padding: 1.4rem 1.1rem; font-size: .85rem; color: var(--tb-ink-faint); }
.tb-site-foot p { margin: 0; }
.tb-footlinks { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .8rem; }
.tb-footlinks a { color: var(--tb-ink-soft); text-decoration: none; }
.tb-footlinks a:hover { color: var(--tb-primary); text-decoration: underline; }

/* ── Hub pages: tool cards ───────────────────────────────────────────
   The glyph in each card is a cell grid whose filled cells show what the
   tool actually does. Days and letters are both grids of small units, so
   the motif is the one thing both halves of the site share. */

.tb-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tb-ink-faint);
  margin: 0 0 .1rem;
}

.tb-cards {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin: 1.4rem 0 0;
}

.tb-card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.05rem 1.1rem 1.1rem;
  background: var(--tb-card);
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius);
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tb-card:hover, .tb-card:focus-visible {
  border-color: var(--tb-primary);
  transform: translateY(-2px);
  box-shadow: var(--tb-shadow);
}
.tb-card:focus-visible { outline: 2px solid var(--tb-primary); outline-offset: 2px; }

.tb-card-glyph { color: var(--tb-primary); }
.tb-card-glyph svg { display: block; }
.tb-card h3 {
  margin: 0; font-size: 1.02rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--tb-ink);
}
.tb-card p { margin: 0; font-size: .89rem; color: var(--tb-ink-soft); line-height: 1.5; }
.tb-card .tb-card-eg {
  margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--tb-line);
  font-size: .78rem; color: var(--tb-ink-faint);
  font-variant-numeric: tabular-nums;
}
.tb-card .tb-card-eg b { color: var(--tb-ink-soft); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .tb-card { transition: none; }
  .tb-card:hover, .tb-card:focus-visible { transform: none; }
}

/* "Which one do I need" — a real routing table, not decoration */
.tb-pick { border: 1px solid var(--tb-line); border-radius: var(--tb-radius); overflow: hidden; margin: 1rem 0; }
.tb-pick-row {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline;
  padding: .7rem 1rem; border-top: 1px solid var(--tb-line);
  background: var(--tb-card);
}
.tb-pick-row:first-child { border-top: 0; }
.tb-pick-q { flex: 1 1 260px; color: var(--tb-ink); font-size: .92rem; }
.tb-pick-a { font-size: .88rem; font-weight: 600; }
.tb-pick-a a { color: var(--tb-primary); text-decoration: none; }
.tb-pick-a a:hover { text-decoration: underline; }

/* Maximiser: each break is a card, because each one is a decision to make */
.tb-breaks { display: grid; gap: .6rem; margin-top: 1.2rem; }
.tb-break {
  padding: .8rem .95rem;
  border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-sm);
  background: var(--tb-card);
}
.tb-break-hd { font-size: 1rem; color: var(--tb-ink); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tb-break-hd b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-break-x {
  margin-left: auto; font-size: .78rem; font-weight: 700;
  color: var(--tb-primary); background: var(--tb-primary-tint);
  border-radius: 999px; padding: .12rem .5rem;
}
.tb-break-when { font-size: .85rem; color: var(--tb-ink-soft); margin-top: .25rem; }

/* The strip: one cell per day of the break. Same motif as the card glyphs,
   at full size. Solid cells are what you pay; the rest you already had. */
.tb-strip {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px dashed var(--tb-line);
}
.tb-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 34px; padding: .25rem .3rem;
  border-radius: 6px; line-height: 1.15;
  border: 1px solid var(--tb-line);
  background: var(--tb-paper);
}
.tb-day i {
  font-style: normal; font-size: .6rem; font-weight: 700;
  letter-spacing: .04em; opacity: .5;
}
.tb-day b { font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Weekend: you already had it. Quiet. */
.tb-day.is-weekend { color: var(--tb-ink-faint); }
/* Bank holiday: free time off. Worth seeing, not worth shouting. */
.tb-day.is-bh {
  background: var(--tb-good-tint);
  border-color: color-mix(in srgb, var(--tb-good) 30%, transparent);
  color: var(--tb-good);
}
/* Leave: the days you actually spend. The only solid cells, because they are
   the only thing being asked of you. */
.tb-day.is-leave {
  background: var(--tb-primary);
  border-color: var(--tb-primary);
  color: #fff;
}
.tb-day.is-leave i { opacity: .7; }

.tb-legend {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem;
  margin-top: 1rem; font-size: .8rem; color: var(--tb-ink-soft);
}
.tb-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.tb-legend i {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  border: 1px solid var(--tb-line); background: var(--tb-paper);
}
.tb-legend .k-bh { background: var(--tb-good-tint); border-color: color-mix(in srgb, var(--tb-good) 30%, transparent); }
.tb-legend .k-leave { background: var(--tb-primary); border-color: var(--tb-primary); }

/* Reference tables (bank holidays). Wide content scrolls inside itself rather
   than making the page scroll sideways on a phone. */
.tb-tablewrap { overflow-x: auto; margin: 1rem 0 1.4rem; border: 1px solid var(--tb-line); border-radius: var(--tb-radius-sm); background: var(--tb-card); }
.tb-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 480px; }
.tb-table caption { text-align: left; padding: .7rem .9rem; font-weight: 700; color: var(--tb-ink); border-bottom: 1px solid var(--tb-line); }
.tb-table th, .tb-table td { padding: .5rem .9rem; text-align: left; border-top: 1px solid var(--tb-line); }
.tb-table thead th {
  border-top: 0; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tb-ink-faint); font-weight: 700; background: var(--tb-paper);
}
.tb-table td:first-child { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tb-ink); font-weight: 600; }
.tb-table td { color: var(--tb-ink-soft); }
.tb-table .tb-yes { color: var(--tb-good); font-weight: 700; }
.tb-table .tb-no { color: var(--tb-line); }
.tb-table .tb-sub { font-size: .74rem; color: var(--tb-ink-faint); display: block; }
.tb-table tbody tr:hover { background: var(--tb-primary-tint); }

/* Text stats: the counts are the answer, so they get the same weight the
   calculators give theirs. */
.tb-field textarea {
  min-height: 150px; resize: vertical; line-height: 1.55;
  font-family: var(--tb-font);
}
.tb-statgrid {
  display: grid; gap: .5rem; margin-top: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.tb-stat {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .7rem .8rem;
  background: var(--tb-primary-tint);
  border: 1px solid color-mix(in srgb, var(--tb-primary) 15%, transparent);
  border-radius: var(--tb-radius-sm);
}
.tb-stat-n {
  font-size: 1.5rem; font-weight: 800; color: var(--tb-ink);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.tb-stat-l { font-size: .76rem; color: var(--tb-ink-soft); font-weight: 600; }
.tb-times {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem;
  margin-top: .95rem; font-size: .9rem; color: var(--tb-ink-soft);
}
.tb-times b { color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb-clear { margin-left: auto; cursor: pointer; font: inherit; font-size: .82rem; }
.tb-clear:hover { border-color: var(--tb-primary); color: var(--tb-primary); }

/* Definitions for the most-used words on a list */
.tb-defs { margin: 1rem 0 0; }
.tb-defs div {
  display: grid; grid-template-columns: minmax(88px, auto) 1fr;
  gap: .2rem .9rem; align-items: baseline;
  padding: .55rem 0; border-top: 1px solid var(--tb-line);
}
.tb-defs div:first-child { border-top: 0; }
.tb-defs dt { font-weight: 700; color: var(--tb-ink); }
.tb-defs dd { margin: 0; font-size: .9rem; color: var(--tb-ink-soft); line-height: 1.5; }
.tb-defs .tb-pos {
  font-size: .74rem; font-weight: 600; color: var(--tb-ink-faint);
  text-transform: lowercase; font-style: italic; margin-right: .3rem;
}
@media (max-width: 480px) {
  .tb-defs div { grid-template-columns: 1fr; gap: .1rem; }
}

/* Part-of-speech split: a real proportion bar, widths are the actual counts */
.tb-posbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: .9rem 0 .6rem; background: var(--tb-line); }
.tb-posbar span { display: block; }
.tb-posbar .is-noun { background: var(--tb-primary); }
.tb-posbar .is-verb { background: var(--tb-good); }
.tb-posbar .is-adjective { background: var(--tb-accent); }
.tb-posbar .is-adverb { background: var(--tb-ink-faint); }
.tb-poskey { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .84rem; color: var(--tb-ink-soft); }
.tb-poskey b { color: var(--tb-ink); font-variant-numeric: tabular-nums; }
.tb-poskey i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .35rem; }

/* Dividend bands: which slice of the dividends was taxed at what. The effective
   rate always looks wrong until you can see the slices it came from. */
.tb-dtbands { margin: 1.1rem 0 .2rem; padding-top: .7rem; border-top: 1px dashed var(--tb-line); }
.tb-dtband {
  display: grid; grid-template-columns: 1fr auto 3.6rem 5rem;
  gap: .5rem; align-items: baseline;
  padding: .35rem 0; font-size: .9rem;
  font-variant-numeric: tabular-nums;
}
.tb-dtband + .tb-dtband { border-top: 1px solid var(--tb-line); }
.tb-dtband span:first-child { color: var(--tb-ink-soft); }
.tb-dtband span:nth-child(3) { color: var(--tb-ink-faint); text-align: right; }
.tb-dtband b { text-align: right; }
@media (max-width: 420px) {
  .tb-dtband { grid-template-columns: 1fr auto 2.8rem 4.2rem; font-size: .84rem; gap: .3rem; }
}

/* Related tools: the sideways links between sibling calculators. Quiet, because
   it sits below the answer someone came for and should not compete with it. */
.tb-related { margin: 2.4rem 0 1.6rem; }
.tb-related h2 {
  font-size: 1.05rem; margin: 0 0 .7rem;
  color: var(--tb-ink);
}
.tb-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.tb-related li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem;
  padding: .55rem 0; border-top: 1px solid var(--tb-line);
}
.tb-related li:last-child { border-bottom: 1px solid var(--tb-line); }
.tb-related a { color: var(--tb-primary); font-weight: 600; text-decoration: none; }
.tb-related a:hover { text-decoration: underline; }
.tb-related span { color: var(--tb-ink-soft); font-size: .88rem; }

/* Maternity pay profile: one bar per week of leave, height is that week's pay.
   Drawn because the two cliffs (90% ends at week 6, pay ends at week 39) are
   the part nobody is told about, and a number cannot show a cliff. */
.tb-payplan {
  display: flex; align-items: flex-end; gap: 1px;
  height: 52px; margin: 1.1rem 0 .5rem;
  padding-top: .7rem; border-top: 1px dashed var(--tb-line);
}
.tb-payplan i { flex: 1 1 0; border-radius: 1.5px 1.5px 0 0; min-width: 0; }
.tb-payplan .is-ninety { background: var(--tb-primary); }
.tb-payplan .is-standard { background: color-mix(in srgb, var(--tb-primary) 45%, transparent); }
/* Unpaid weeks still get a stub, so the 13 weeks of leave you can take without
   pay are visible rather than simply absent. */
.tb-payplan .is-unpaid { background: var(--tb-line); }
.tb-payplan-key {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .84rem; color: var(--tb-ink-soft); margin: 0;
}
.tb-payplan-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .35rem; }
.tb-payplan-key .is-ninety { background: var(--tb-primary); }
.tb-payplan-key .is-standard { background: color-mix(in srgb, var(--tb-primary) 45%, transparent); }
.tb-payplan-key .is-unpaid { background: var(--tb-line); }

/* Word engine: grid of words + length filter chips + related links */
.tb-wordgrid {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: 1rem;
}
.tb-word {
  font-size: .95rem; color: var(--tb-ink);
  background: var(--tb-paper); border: 1px solid var(--tb-line);
  border-radius: var(--tb-radius-sm); padding: .32rem .6rem;
  font-variant-numeric: tabular-nums;
}
.tb-word[hidden] { display: none; }
.tb-lenbtn { cursor: pointer; font: inherit; font-size: .82rem; }
.tb-lenbtn.is-on { background: var(--tb-primary); color: #fff; border-color: var(--tb-primary); }
.tb-lenbtn.is-on b { color: #fff; }

.tb-linkrow { display: flex; flex-wrap: wrap; gap: .45rem; }
.tb-linkrow a.tb-chip { text-decoration: none; color: var(--tb-ink-soft); }
.tb-linkrow a.tb-chip:hover { border-color: var(--tb-primary); color: var(--tb-primary); }
.tb-linkrow a.tb-chip.is-here { background: var(--tb-primary); color: #fff; border-color: var(--tb-primary); }

/* Ad slot placeholders — real units injected by AdSense/Ezoic later */
.tb-ad { margin: 1.6rem auto; text-align: center; min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--tb-ink-faint); font-size: .75rem; border: 1px dashed var(--tb-line); border-radius: var(--tb-radius-sm); }