/* Free tools: the appointment summary builder, the kids' poo chart and reward chart, the Bristol
   chart in other languages. Uses style.css's colour tokens; no inline styles (the CSP). */

/* Summary builder */
.builder fieldset { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 18px 20px 20px; margin: 0 0 18px; }
.builder legend { font-weight: 700; font-size: 19px; padding: 0 6px; }
.builder label { display: block; font-weight: 600; margin: 14px 0 6px; }
.builder .hint { color: var(--ink-muted); font-size: 15px; margin: -2px 0 8px; }
.builder input[type="text"], .builder input[type="number"], .builder input[type="date"], .builder textarea {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; color: var(--ink); background: var(--canvas);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.builder textarea { min-height: 84px; resize: vertical; }
.builder input:focus-visible, .builder textarea:focus-visible { outline: 2px solid var(--moss); outline-offset: 1px; }
.builder .row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .builder .row { grid-template-columns: 1fr; } }
.builder .checks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 6px; }
.builder .check { display: flex; gap: 10px; align-items: center; font-weight: 400; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); cursor: pointer; }
.builder .check input { width: 20px; height: 20px; accent-color: var(--moss); flex: none; }
.builder .typepick { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: 6px; }
.builder .typepick .check { flex-direction: column; align-items: flex-start; gap: 4px; }
.builder .typepick svg { width: 48px; height: 32px; color: var(--glyph); }
.builder .typepick .check:has(input:checked) { border-color: var(--moss); background: var(--moss-soft); }
.builder .typepick .check:has(input:checked) svg { color: var(--moss); }
.builder .typepick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.builder .typepick .check:focus-within { outline: 2px solid var(--moss); outline-offset: 2px; }
.builder .typepick small { color: var(--ink-muted); font-size: 14px; line-height: 1.3; }
.privacy-line { display: flex; gap: 10px; align-items: flex-start; background: var(--moss-soft); border-radius: 16px; padding: 12px 16px; font-size: 16px; }
.alertbox { border: 2px solid var(--ink); border-radius: var(--radius); padding: 6px 20px 12px; margin: 18px 0; background: var(--surface); }
.alertbox h2 { margin-top: 14px; font-size: 20px; }
.sources-list { font-size: 15px; color: var(--ink-muted); }
.sources-list li { margin: 6px 0; overflow-wrap: anywhere; }

/* The printed summary */
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; }
.summary h2 { margin-top: 0; }
.summary h3 { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); margin: 18px 0 4px; }
.summary p, .summary li { font-size: 16px; margin: 3px 0; }
.summary .empty { color: var(--ink-muted); font-style: italic; }
.summary .types-line { display: flex; flex-wrap: wrap; gap: 10px; }
.summary .types-line span { display: inline-flex; align-items: center; gap: 4px; }
.summary .types-line svg { width: 36px; height: 24px; }
.summary .flag { font-weight: 700; }
.summary .blank { border-bottom: 1px solid var(--line); min-height: 26px; margin: 6px 0; }

@media print {
  html.js .builder, html.js .builder-only, html.js .privacy-line, html.js .alertbox, html.js .sources-list, html.js .sources-h,
  html.js .summary-page .kicker, html.js .summary-page > h1, html.js .summary-page > .lead { display: none !important; }
  html:not(.js) .summary { display: none; }
  .summary { border: 0; padding: 0; margin: 0; }
  .summary .types-line svg { color: #444; }
  @page { size: auto; margin: 14mm; }
}

/* Kids' poo chart */
.kids .types { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.kids .kidtype { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; grid-template-columns: 84px 1fr; gap: 6px 14px; align-items: center; }
.kids .kidtype svg { width: 84px; height: 56px; color: var(--glyph); grid-row: span 2; }
.kids .kidtype strong { font-size: 21px; }
.kids .kidtype p { margin: 0; font-size: 17px; }
.kids .kidtype .num { color: var(--ink-muted); font-size: 15px; display: block; }
.kids .band { font-weight: 700; color: var(--ink-muted); margin: 18px 0 6px; }
.reward { width: 100%; border-collapse: collapse; margin: 14px 0; table-layout: fixed; }
.reward th, .reward td { border: 1.5px solid var(--line); text-align: center; padding: 8px 4px; font-size: 15px; }
.reward td { height: 64px; }
.reward th:first-child, .reward td:first-child { text-align: left; width: 32%; padding-left: 10px; font-weight: 600; }
.reward caption { text-align: left; font-weight: 700; font-size: 19px; padding-bottom: 6px; }
.reward-name { display: flex; gap: 10px; align-items: baseline; font-size: 18px; margin-top: 10px; }
.reward-name span { flex: 1; border-bottom: 1.5px solid var(--line); min-height: 26px; }
.page-break { break-before: page; }
@media print {
  .kids .kidtype { border-color: #999; break-inside: avoid; }
  .kids .kidtype svg { color: #333; }
  .reward th, .reward td { border-color: #777; }
  .kids-guide { display: none; }
}

/* Language links */
.langs { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 16px; margin: 6px 0 18px; }
.langs a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }

/* Baby poo chart */
.stages { list-style: none; padding: 0; display: grid; gap: 10px; }
.stage { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stage strong { font-size: 18px; display: block; margin-bottom: 2px; }
.stage p { margin: 0; font-size: 16px; color: var(--ink-muted); }
.bk-swatch circle { stroke: var(--line); stroke-width: 1.5; }
.swatch-line { display: flex; gap: 10px; align-items: flex-start; }
.swatch-line svg { flex: none; margin-top: 2px; }

/* Fibre checker */
.fibre-total { position: sticky; top: 64px; z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 18px 0; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.fibre-total label { font-weight: 600; font-size: 15px; margin-right: 8px; }
.fibre-total select { font: inherit; font-size: 16px; color: var(--ink); background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; max-width: 100%; }
.fibre-count { margin: 10px 0 8px; font-size: 18px; }
.fibre-count strong { font-size: 28px; }
.fibre-bar { height: 12px; background: var(--fill); border-radius: 999px; overflow: hidden; }
.fibre-bar span { display: block; height: 100%; background: var(--moss); border-radius: 999px; transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .fibre-bar span { transition: none; } }
.foods { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.food { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.food.on { border-color: var(--moss); background: var(--moss-soft); }
.fname { font-weight: 600; font-size: 16px; display: flex; flex-direction: column; }
.fname small { font-weight: 400; color: var(--ink-muted); font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 6px; flex: none; }
html:not(.js) .stepper { display: none; }
.stepper output { min-width: 18px; text-align: center; font-weight: 700; }
.step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--canvas); color: var(--ink); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.step:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.fibre-bar .w0 { width: 0%; }
.fibre-bar .w5 { width: 5%; }
.fibre-bar .w10 { width: 10%; }
.fibre-bar .w15 { width: 15%; }
.fibre-bar .w20 { width: 20%; }
.fibre-bar .w25 { width: 25%; }
.fibre-bar .w30 { width: 30%; }
.fibre-bar .w35 { width: 35%; }
.fibre-bar .w40 { width: 40%; }
.fibre-bar .w45 { width: 45%; }
.fibre-bar .w50 { width: 50%; }
.fibre-bar .w55 { width: 55%; }
.fibre-bar .w60 { width: 60%; }
.fibre-bar .w65 { width: 65%; }
.fibre-bar .w70 { width: 70%; }
.fibre-bar .w75 { width: 75%; }
.fibre-bar .w80 { width: 80%; }
.fibre-bar .w85 { width: 85%; }
.fibre-bar .w90 { width: 90%; }
.fibre-bar .w95 { width: 95%; }
.fibre-bar .w100 { width: 100%; }

/* IBS food diary */
.ibs caption { text-align: left; font-weight: 700; font-size: 17px; padding: 14px 0 6px; }
.ibs td { height: 54px; }
.ibs td:nth-child(4) { color: var(--ink-muted); font-size: 13px; white-space: nowrap; width: 90px; }
.ibs th:first-child, .ibs td:first-child { width: 64px; }
@media print { .ibs-page .ibs-day { break-inside: avoid; } .ibs td { height: 56px; } }
.help-list { list-style: none; padding: 0; }
.help-list li { margin: 10px 0; }
.ibs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ibs { min-width: 640px; }
@media print { .ibs-scroll { overflow: visible; } .ibs { min-width: 0; } }