/* Free browser tools: /free-text-message-log.html, /free-hearing-prep-plan.html and
   /hearing-readiness-check.html. Loaded after styles.css; mobile first. */

.tool-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.tool-badges li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 650; color: var(--ink); }
.tool-badges svg { width: 16px; height: 16px; color: var(--ok); flex: none; }

.tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(1.1rem, 0.8rem + 2vw, 2rem); }
.tool-card + .tool-card { margin-top: 1.5rem; }
.tool-card h2 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.tool-card > p { color: var(--ink-soft); font-size: var(--fs-sm); }

.tool-field { margin-top: 1.1rem; }
.tool-field > label:not(.drop), .tool-field > legend { display: block; font-weight: 650; font-size: var(--fs-sm); margin-bottom: 0.4rem; color: var(--ink); padding: 0; }
.tool-field fieldset, fieldset.tool-field { border: 0; padding: 0; margin: 1.1rem 0 0; min-width: 0; }
.tool-field .hint { font-size: var(--fs-xs); color: var(--muted); margin: 0.35rem 0 0; }
.tool-input, .tool-select {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; color: var(--ink);
  font: 400 1rem/1.3 var(--font); /* 16px: no zoom-on-focus on iOS */
}
.tool-input:focus, .tool-select:focus { outline: none; border-color: var(--indigo-bright); box-shadow: 0 0 0 3px rgba(93, 141, 240, 0.25); }
.tool-input:disabled { background: #f3f1ec; color: var(--muted); }
.tool-input[aria-invalid="true"] { border-color: var(--warn); }
.tool-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 40rem) { .tool-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tool-choices label { display: flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--line-strong); border-radius: 12px; background: #fff; font-size: var(--fs-sm); cursor: pointer; }
.tool-choices input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
.tool-choices label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tool-check { display: flex; gap: 0.55rem; align-items: center; margin-top: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); cursor: pointer; }
.tool-check input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1.3rem; }
.tool-actions .btn { min-height: 48px; }
.tool-status { min-height: 1.4em; margin: 0.8rem 0 0; font-size: var(--fs-sm); font-weight: 600; }
.tool-status[data-kind="error"] { color: var(--warn); }
.tool-status[data-kind="busy"] { color: var(--muted); }
.tool-status[data-kind="ok"] { color: var(--ok); }

/* File drop zone (a styled label for the real file input). */
.drop { position: relative; display: grid; justify-items: center; gap: 0.35rem; padding: 1.6rem 1rem; border: 2px dashed var(--line-strong); border-radius: var(--radius-lg); background: #fcfbf8; text-align: center; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; }
.drop:hover, .drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop:focus-within { border-color: var(--indigo-bright); box-shadow: 0 0 0 3px rgba(93, 141, 240, 0.25); }
.drop svg { width: 34px; height: 34px; color: var(--accent-deep); }
.drop strong { font-size: 1.05rem; }
.drop span { font-size: var(--fs-xs); color: var(--muted); }
.drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.local-note { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--ok-soft); font-size: var(--fs-sm); color: var(--ink); }
.local-note svg { width: 20px; height: 20px; flex: none; color: var(--ok); margin-top: 0.1rem; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--indigo); text-decoration: underline; cursor: pointer; }

/* Results: numbers. */
.tl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 1rem 0 0; }
@media (min-width: 48rem) { .tl-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tl-stats div { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fcfbf8; }
.tl-stats dt { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.tl-stats dd { margin: 0.15rem 0 0; font-size: 1.15rem; font-weight: 750; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; }
.tl-stats dd small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.tl-notes { margin: 0.9rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.tl-notes li + li { margin-top: 0.25rem; }

/* Results: the watermarked preview, laid out like the real log. */
.tl-preview { position: relative; margin-top: 1.2rem; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; overflow: hidden; }
.tl-preview-head { padding: 0.85rem 1rem; border-bottom: 2px solid var(--navy-900); font-size: var(--fs-xs); color: var(--ink-soft); line-height: 1.55; }
.tl-preview-head strong { display: block; font-size: 1rem; color: var(--ink); }
.tl-preview-head .tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; vertical-align: 0.1em; }
.tl-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tl-table thead { display: none; }
.tl-table tr { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); }
.tl-table td { padding: 0; }
.tl-table .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.tl-table .when { color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tl-table .who { grid-column: 1 / -1; font-weight: 650; color: var(--ink); }
.tl-table .who .ch { font-weight: 500; color: var(--muted); }
.tl-table .body { grid-column: 1 / -1; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-table .ch-col, .tl-table .date-col { display: none; }
@media (min-width: 48rem) {
  .tl-table thead { display: table-header-group; }
  .tl-table tr { display: table-row; padding: 0; }
  .tl-table th, .tl-table td { display: table-cell; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .tl-table th { background: var(--navy-900); color: #fff; font-weight: 650; font-size: 0.78rem; }
  .tl-table .when { text-align: left; }
  .tl-table .who .ch { display: none; }
  .tl-table .ch-col, .tl-table .date-col { display: table-cell; }
  .tl-table .date-col { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
  .tl-table .when .d { display: none; }
}
.tl-more { padding: 0.8rem 1rem; font-size: var(--fs-sm); color: var(--ink-soft); background: #fcfbf8; }
.tl-wm { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; pointer-events: none; overflow: hidden; user-select: none; -webkit-user-select: none; }
.tl-wm span { transform: rotate(-24deg); font-size: clamp(2.6rem, 14vw, 5.5rem); font-weight: 800; letter-spacing: 0.18em; color: rgba(217, 122, 60, 0.17); white-space: nowrap; }

.tool-cta { margin-top: 1.4rem; padding: 1.2rem; border-radius: var(--radius-lg); background: var(--navy-900); color: #fff; }
.tool-cta h3 { color: #fff; font-size: 1.15rem; margin-bottom: 0.35rem; }
.tool-cta p { color: #cfd7e6; font-size: var(--fs-sm); }
.tool-cta .btn-primary { width: 100%; margin-top: 0.8rem; min-height: 52px; }
@media (min-width: 40rem) { .tool-cta .btn-primary { width: auto; } }
.tool-cta .fine { margin-top: 0.6rem; font-size: var(--fs-xs); color: #b9c4da; }
.tool-cta a:not(.btn) { color: #f0a26b; }
.tool-cta ul { margin: 0.6rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: #cfd7e6; }

/* Export help and how-it-works cards. */
.help-grid { display: grid; gap: 1rem; }
@media (min-width: 56rem) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
.help-grid ol { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.help-grid ol li + li { margin-top: 0.3rem; }
.help-grid .more { margin-top: 0.6rem; font-size: var(--fs-sm); }
.safety-line { margin-top: 1rem; padding: 0.8rem 1rem; border-left: 4px solid var(--warn); border-radius: 8px; background: #fbeeeb; font-size: var(--fs-sm); color: var(--ink); }
.legal-line { margin-top: 1rem; font-size: var(--fs-xs); color: var(--muted); }

/* Hearing plan output. */
.plan-head { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; justify-content: space-between; }
.plan-head h2 { margin: 0; }
.plan-meta { margin: 0.3rem 0 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.plan-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.plan-tools .btn { min-height: 44px; }
.plan-week { margin-top: 1.4rem; }
.plan-week h3 { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; font-size: 1.05rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--line); }
.plan-week h3 .range { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.plan-week.is-hearing h3 { border-bottom-color: var(--accent); }
.plan-gap { margin-top: 1.1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: #f3f1ec; font-size: var(--fs-sm); color: var(--ink-soft); }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-item { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.plan-item input { width: 22px; height: 22px; margin: 0.1rem 0 0; accent-color: var(--ok); grid-column: 1; grid-row: 1 / span 4; }
.plan-item > span { grid-column: 2; }
.plan-item .t { font-weight: 650; color: var(--ink); }
.plan-item .due { font-size: var(--fs-xs); font-weight: 700; color: var(--accent-deep); text-transform: uppercase; letter-spacing: 0.04em; }
.plan-item .b { font-size: var(--fs-sm); color: var(--ink-soft); }
.plan-item .app { font-size: var(--fs-xs); color: var(--muted); }
.plan-item .b a { font-weight: 600; }
.plan-item input:checked ~ .t { text-decoration: line-through; color: var(--muted); }

.tool-next { margin-top: 1rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.tool-next a { font-weight: 650; }

/* Hearing readiness check (/hearing-readiness-check.html; tools/readiness-check.js).
   Without JS every question shows as a list; with JS (.is-stepper) one at a time. */
.rc-section { padding-top: clamp(2rem, 1.5rem + 3vw, 4rem); scroll-margin-top: 2.5rem; }
.rc-card, .rc-result { scroll-margin-top: 5.5rem; }
.rc-progress { height: 8px; border-radius: var(--radius-pill); background: #efeae1; overflow: hidden; }
.rc-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.25s ease; }
.rc-count { margin: 0.6rem 0 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rc-card > .rc-progress, .rc-card > .rc-count { display: none; }
.rc-card.is-stepper > .rc-progress, .rc-card.is-stepper > .rc-count { display: block; }
.rc-questions { list-style: none; margin: 0; padding: 0; }
.rc-q { margin-top: 1.3rem; }
.rc-q + .rc-q { padding-top: 1.3rem; border-top: 1px solid var(--line); }
.is-stepper .rc-q + .rc-q { padding-top: 0; border-top: 0; }
.rc-q[hidden] { display: none; }
.rc-q fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.rc-q legend { padding: 0; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); font-weight: 700; line-height: 1.35; color: var(--ink); }
.rc-q legend:focus { outline: none; }
.rc-qn { color: var(--accent-deep); }
.is-stepper .rc-qn { display: none; }
.rc-q .hint { margin: 0.4rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
.rc-answers { display: grid; gap: 0.55rem; margin-top: 1rem; }
.rc-answers label { display: flex; align-items: center; gap: 0.75rem; min-height: 54px; padding: 0.7rem 1rem; border: 1.5px solid var(--line-strong); border-radius: 14px; background: #fff; font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.rc-answers label:hover { border-color: var(--accent); }
.rc-answers input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.rc-answers label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.rc-answers label:has(input:focus-visible) { outline: 3px solid rgba(93, 141, 240, 0.45); outline-offset: 2px; }
.rc-nav { display: flex; justify-content: space-between; gap: 0.6rem; margin-top: 1.3rem; }
.rc-nav[hidden] { display: none; }
.rc-nav .btn { min-height: 48px; }
.rc-nav .btn[hidden] { display: none; }
.rc-nav #rc-next { margin-left: auto; }
.rc-nav .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.rc-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.rc-ring { --p: 0; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--ok) calc(var(--p) * 1%), #ebe6dc 0); }
.rc-ring span { display: grid; place-items: center; align-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--surface); text-align: center; line-height: 1; }
.rc-ring b { font-size: 1.65rem; font-weight: 800; color: var(--ink); }
.rc-ring small { display: block; margin-top: 0.2rem; font-size: 0.62rem; font-weight: 650; color: var(--muted); }
.rc-band { margin: 0; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok); }
.rc-head h2 { margin: 0.2rem 0 0.35rem; font-size: var(--fs-h3); }
.rc-head h2:focus { outline: none; }
.rc-sum { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 30rem) { .rc-head { grid-template-columns: 1fr; justify-items: start; } }
.rc-note { margin-top: 1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: #f3f1ec; font-size: var(--fs-xs); color: var(--ink-soft); }
.rc-h3 { margin: 1.5rem 0 0.2rem; font-size: 1.1rem; }
.rc-list-head { align-items: center; margin-top: 1.5rem; }
.rc-list-head .rc-h3 { margin: 0; }
.rc-steps { display: grid; gap: 0.7rem; margin: 0.7rem 0 0; padding: 0; list-style: none; }
.rc-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fcfbf8; }
.rc-steps .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.95rem; font-weight: 800; }
.rc-steps strong { display: block; color: var(--ink); }
.rc-steps p { margin: 0.2rem 0 0.35rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.rc-steps a { font-size: var(--fs-sm); font-weight: 650; }
.rc-status { display: inline-block; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; vertical-align: 0.1em; white-space: nowrap; }
.rc-status.yes { background: var(--ok-soft); color: var(--ok); }
.rc-status.part { background: var(--accent-soft); color: var(--accent-deep); }
.rc-status.todo { background: #f3f1ec; color: var(--ink-soft); }
.rc-status.na { background: #f3f1ec; color: var(--muted); }
.rc-checklist .plan-item { align-items: start; }
.rc-checklist .rc-status { grid-column: 2; justify-self: start; }
.rc-checklist .rc-na .t { color: var(--muted); }
.rc-lead { margin-top: 1.2rem; padding: 1rem 1.15rem; box-shadow: none; border-left: 4px solid var(--accent); }
.rc-lead .lead-form { margin-top: 0.65rem; }
.rc-lead .lead-consent { font-size: var(--fs-xs); }
.rc-more { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; margin-top: 1.2rem; font-size: var(--fs-sm); }
.rc-more a { font-weight: 650; }
.rc-safety { margin-top: 1.2rem; }

@media print {
  .site-header, .site-footer, .sticky-cta, .skip-link, .no-print, .page-hero, .cta-band { display: none !important; }
  body { background: #fff; }
  main .section { padding: 0 !important; }
  .tool-card { box-shadow: none; border: 0; padding: 0; }
  .plan-week { break-inside: avoid-page; }
  .plan-item { break-inside: avoid; }
  .plan-item input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1.5px solid #000; border-radius: 2px; }
  .plan-item .app { display: none; }
  .rc-result { box-shadow: none; border: 0; padding: 0; }
  .rc-ring { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-steps li { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}