/* TheLearnDen sentence tools. Paired with /tools/tools.js.
   Uses the site design tokens (with fallbacks) so both themes work unchanged. */

.tool-page { max-width: 780px; margin: 0 auto; padding: 0 0 3rem; color: var(--ink, #edeef2);
  --tool-tone: var(--subject-english, #ff7088); }
:root[data-theme="light"] .tool-page { --tool-tone-ink: #fff; }
.tool-page h1 { max-width: 20ch; }
.tool-page section { margin-top: 2rem; }
.tool-page h2 { margin-top: 2rem; }
.tool-page h3 { margin-top: 1.3rem; }
.tool-meta { color: var(--ink-soft, #a5aec0); font-size: .95rem; margin-top: .4rem; }
.tool-page ul, .tool-page ol { padding-left: 1.35rem; }
.tool-page li { margin: .3rem 0; }

/* The activity shell -------------------------------------------------------- */
.tool-live { margin: 1.4rem 0 2rem; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line, #354156); border-radius: var(--radius, 18px);
  background: var(--card, #212936); }
.tool-noscript { margin: 1.4rem 0; padding: 1rem 1.15rem; border: 1px dashed var(--line, #354156);
  border-radius: var(--radius, 18px); color: var(--ink-soft, #a5aec0); }
.tool-stage { margin: 1rem 0; }
.tool-patient { margin: .4rem 0 1rem; padding: clamp(.9rem, 3vw, 1.3rem);
  border-radius: calc(var(--radius, 18px) - 6px); background: var(--card2, #283345);
  border-left: 4px solid var(--tool-tone);
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.15rem, 4.4vw, 1.45rem); line-height: 1.4; }
.tool-words { margin: .4rem 0 .8rem; padding: clamp(.9rem, 3vw, 1.3rem); text-align: center;
  border-radius: calc(var(--radius, 18px) - 6px); background: var(--card2, #283345);
  font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.3rem, 6vw, 2rem); font-weight: 700;
  color: var(--tool-tone); }
.tool-prompt { margin: .6rem 0; font-weight: 600; }
.tool-note { color: var(--ink-soft, #a5aec0); font-size: .92rem; }
.tool-steps { margin: 0 0 1.2rem; color: var(--ink-soft, #a5aec0); }

/* Buttons ------------------------------------------------------------------- */
.tool-btn, .tool-level, .tool-fault, .tool-spell, .tool-detail, .tool-slot {
  font: inherit; cursor: pointer; border-radius: 999px; padding: .6rem 1.1rem;
  min-height: 44px; border: 1px solid var(--line, #354156);
  background: var(--card2, #283345); color: var(--ink, #edeef2); }
.tool-btn:hover, .tool-level:hover, .tool-fault:hover:not(:disabled),
.tool-spell:hover, .tool-detail:hover, .tool-slot:hover:not(:disabled) { border-color: var(--tool-tone); }
.tool-btn-primary { background: var(--tool-tone); border-color: var(--tool-tone); color: var(--tool-tone-ink, #14161c); font-weight: 700; }
.tool-btn:focus-visible, .tool-level:focus-visible, .tool-fault:focus-visible,
.tool-spell:focus-visible, .tool-detail:focus-visible, .tool-slot:focus-visible,
.tool-pad textarea:focus-visible, .tool-own input:focus-visible,
.tool-check-list input:focus-visible {
  outline: 3px solid var(--accent, #3fd0bf); outline-offset: 3px; }
.tool-controls { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 .4rem; }
.tool-levels { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.tool-level.is-on { background: var(--tool-tone); border-color: var(--tool-tone); color: var(--tool-tone-ink, #14161c); font-weight: 700; }

/* Spot the Mistake --------------------------------------------------------- */
.tool-faults { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.tool-fault { padding: .55rem .9rem; font-size: .95rem; }
.tool-fault:disabled { opacity: .55; cursor: default; }
.tool-fault.is-right, .tool-slot.is-right { background: var(--good, #6fd388); border-color: var(--good, #6fd388); color: #10231a; opacity: 1; font-weight: 700; }
.tool-fault.is-wrong, .tool-slot.is-wrong { background: var(--subject-english, #ff7088); border-color: var(--subject-english, #ff7088); color: #23121a; opacity: 1; font-weight: 700; }
.tool-fault.is-answer:not(.is-right) { border-color: var(--good, #6fd388); border-width: 2px; opacity: 1; }
.tool-verdict { margin: 1rem 0; padding: clamp(.9rem, 3vw, 1.2rem);
  border: 1px solid var(--line, #354156); border-radius: calc(var(--radius, 18px) - 6px);
  background: var(--bg2, #191e27); }
.tool-verdict h3:first-child { margin-top: 0; }
.tool-flag { font-weight: 700; margin: 0 0 .6rem; }
.tool-flag.is-right { color: var(--good-text, #6fd388); }
.tool-flag.is-wrong { color: var(--warn-text, #ffb35c); }
:root[data-theme="light"] .tool-flag.is-right {
  color: color-mix(in srgb, var(--good-text, #147c4f) 82%, var(--ink, #202a3a));
}
.tool-cure { font-family: 'Fraunces', Georgia, serif; font-size: 1.12rem; margin: .3rem 0 .8rem; }
.tool-stripped { font-family: 'Fraunces', Georgia, serif; color: var(--ink-soft, #a5aec0); margin: .2rem 0 0; }
.tool-comma { color: var(--tool-tone); font-size: 1.35em; line-height: 0; }
.tool-tally { color: var(--ink-soft, #a5aec0); font-weight: 600; margin: .4rem 0 0; }

/* Writing pad + checklist --------------------------------------------------- */
.tool-pad { margin: 1rem 0; }
.tool-pad-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.tool-pad textarea { width: 100%; padding: .7rem .85rem; font: inherit; line-height: 1.5;
  border: 1px solid var(--line, #354156); border-radius: .7rem;
  background: var(--bg2, #191e27); color: var(--ink, #edeef2); resize: vertical; }
.tool-check { margin: 1rem 0 .5rem; }
.tool-check h3 { margin-top: 0; }
.tool-check-list { list-style: none; padding: 0; margin: .5rem 0; }
.tool-check-list li { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .45rem 0; }
.tool-check-list input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem;
  accent-color: var(--good, #6fd388); }
.tool-check-list label { cursor: pointer; }
.tool-score { font-weight: 700; margin: .3rem 0 0; color: var(--ink-soft, #a5aec0); }
.tool-score.is-full { color: var(--good-text, #6fd388); }

/* Sentence Building -------------------------------------------------------- */
.tool-own { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: .8rem 0; }
.tool-own label { font-size: .95rem; color: var(--ink-soft, #a5aec0); width: 100%; }
.tool-own input { flex: 1 1 12rem; min-height: 44px; padding: .55rem .8rem; font: inherit;
  border: 1px solid var(--line, #354156); border-radius: .7rem;
  background: var(--bg2, #191e27); color: var(--ink, #edeef2); }
.tool-timer { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin: .8rem 0; }
.tool-timer input { width: 1.15rem; height: 1.15rem; accent-color: var(--tool-tone); }
.tool-clock { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 700;
  margin-left: auto; color: var(--ink-soft, #a5aec0); font-variant-numeric: tabular-nums; }
.tool-clock.is-low { color: var(--warn-text, #ffb35c); }
.tool-routine { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line, #354156); }
.tool-routine h3 { margin-top: 0; }
.tool-routine p { color: var(--ink-soft, #a5aec0); margin: .4rem 0 0; }

/* Fronted Adverbials ------------------------------------------------------- */
.tool-spells { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.tool-spell { padding: .55rem .95rem; font-size: .95rem; }
.tool-spell.is-on { background: var(--tool-tone); border-color: var(--tool-tone); color: var(--tool-tone-ink, #14161c); font-weight: 700; }
.tool-spell-group { width: 100%; margin: .8rem 0 .1rem; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft, #a5aec0);
  font-family: 'Outfit', system-ui, sans-serif; }
.tool-examples { margin: .4rem 0 0; }
.tool-examples li { font-family: 'Fraunces', Georgia, serif; }
.tool-saved-wrap { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line, #354156); }
.tool-saved { margin: .5rem 0 0; }
.tool-saved li { font-family: 'Fraunces', Georgia, serif; margin: .5rem 0; }
.tool-saved-tag { display: inline-block; margin-right: .5rem; padding: .1rem .55rem;
  border-radius: 999px; background: var(--card2, #283345); color: var(--tool-tone);
  font-family: 'Outfit', system-ui, sans-serif; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; vertical-align: .12em; }

/* Relative Clauses KS2 ----------------------------------------------------- */
.tool-details { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0 1rem; align-items: flex-start; }
.tool-detail { text-align: left; font-size: .98rem; }
.tool-detail.is-on { background: var(--tool-tone); border-color: var(--tool-tone); color: var(--tool-tone-ink, #14161c); font-weight: 700; }
.tool-slots { margin: 1rem 0; }
/* Laid out as flowing text, not flex: the gaps have to read as part of the
   sentence, and a flex row breaks the wording onto its own lines. */
.tool-slot-line { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1rem, 3.6vw, 1.15rem);
  line-height: 2.4; }
.tool-slot { display: inline-block; vertical-align: middle; margin: 0 .2rem;
  padding: .3rem .75rem; min-height: 38px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; font-family: 'Outfit', system-ui, sans-serif;
  border-style: dashed; color: var(--ink-soft, #a5aec0); }
.tool-slot:disabled { cursor: default; }
.tool-slot-word { display: inline; }

/* Times-tables practice ---------------------------------------------------- */
.times-tables-page { max-width: 900px; --tool-tone: var(--subject-maths, #68c7ff); }
.tool-table-wrap { overflow-x: auto; margin: 1rem 0; }
.tool-table { width: 100%; border-collapse: collapse; background: var(--card, #212936); }
.tool-table caption { padding: .65rem; text-align: left; font-weight: 700; color: var(--ink, #edeef2); }
.tool-table th, .tool-table td { padding: .7rem .8rem; border: 1px solid var(--line, #354156); text-align: left; vertical-align: top; }
.tool-callout { margin: 1rem 0; padding: 1rem 1.15rem; border: 1px solid var(--tool-tone);
  border-radius: var(--radius, 18px); background: var(--bg2, #191e27); }
.tool-callout h3 { margin-top: 0; }
.tt-toolbar { display: flex; justify-content: flex-end; margin-bottom: .8rem; }
.tt-panel { min-height: 15rem; }
.tt-panel-heading { margin-top: .2rem; }
.tt-live-status { min-height: 1.6rem; margin: .25rem 0; color: var(--ink-soft, #a5aec0); font-weight: 600; }
.tt-mode-buttons, .tt-table-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .65rem; margin: 1rem 0; }
.tt-mode.is-on, .tt-table-button.is-on { background: var(--tool-tone); border-color: var(--tool-tone); color: var(--tool-tone-ink, #101820); font-weight: 700; }
.tt-fieldset { margin: 1.2rem 0; padding: 1rem; border: 1px solid var(--line, #354156); border-radius: calc(var(--radius, 18px) - 4px); }
.tt-fieldset legend { padding: 0 .45rem; font-weight: 700; }
.tt-choice, .tt-check-choice { display: flex; align-items: flex-start; gap: .65rem; min-height: 44px; padding: .45rem 0; }
.tt-choice input, .tt-check-choice input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--tool-tone); }
.tt-choice label, .tt-check-choice label { cursor: pointer; }
.tt-custom-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .25rem .8rem; margin-top: .8rem; }
.tt-custom-tables .tool-note { grid-column: 1 / -1; }
.tt-start { margin-top: .3rem; }
.tt-progress-text { color: var(--ink-soft, #a5aec0); font-weight: 700; }
.tt-equation { margin: .7rem 0; text-align: center; font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.3rem, 12vw, 5rem); font-weight: 700; line-height: 1.1; color: var(--ink, #edeef2); }
.tt-answer-form { max-width: 34rem; margin: 0 auto; }
.tt-answer { display: block; width: min(100%, 12rem); min-height: 58px; margin: 0 auto 1rem; padding: .45rem .8rem;
  border: 2px solid var(--line, #354156); border-radius: .8rem; background: var(--bg2, #191e27);
  color: var(--ink, #edeef2); font: 700 clamp(1.8rem, 8vw, 2.6rem) 'Outfit', system-ui, sans-serif; text-align: center; }
.tt-keypad { display: grid; grid-template-columns: repeat(3, minmax(4.25rem, 1fr)); gap: .55rem; }
.tt-key { min-height: 52px; border-radius: .8rem; font-size: 1.15rem; }
.tt-key-wide, .tt-submit { grid-column: span 3; }
.tt-feedback { margin: 1.1rem 0; padding: 1rem 1.15rem; border: 1px solid var(--line, #354156);
  border-radius: calc(var(--radius, 18px) - 5px); background: var(--bg2, #191e27); }
.tt-feedback .tool-flag { font-size: 1.1rem; }
.tt-next { display: block; margin: 1rem auto 0; }
.tt-next[hidden] { display: none; }
.tt-result-number { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 700; }
.tt-missed-list { columns: 2; column-gap: 2rem; }
.tt-missed-list li { break-inside: avoid; }
.tt-timer-label { text-align: center; font-weight: 700; color: var(--warn-text, #ffb35c); }
.tt-timer-progress { display: block; width: min(100%, 34rem); height: 1rem; margin: .8rem auto 1rem; accent-color: var(--tool-tone); }
.tt-recorded { text-align: center; font-family: 'Fraunces', Georgia, serif; font-size: 1.7rem; font-weight: 700; }
.tt-practice-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tt-practice-groups section { margin-top: 0; padding: .8rem 1rem; border: 1px solid var(--line, #354156); border-radius: .8rem; background: var(--card, #212936); }
.tt-practice-groups h3 { margin-top: 0; }
.tt-answer-key { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid var(--line, #354156); border-radius: .8rem; }
.tt-answer-key summary { cursor: pointer; font-weight: 700; }
.tt-mode:focus-visible, .tt-table-button:focus-visible, .tt-large-toggle:focus-visible,
.tt-choice input:focus-visible, .tt-check-choice input:focus-visible, .tt-answer:focus-visible,
.tt-key:focus-visible, .tt-start:focus-visible, .tt-next:focus-visible {
  outline: 3px solid var(--accent, #3fd0bf); outline-offset: 3px; }
.tool-live.is-large-display .tt-equation { font-size: clamp(4rem, 14vw, 8rem); }
.tool-live.is-large-display .tt-key, .tool-live.is-large-display .tt-start,
.tool-live.is-large-display .tt-next, .tool-live.is-large-display .tt-mode,
.tool-live.is-large-display .tt-table-button { min-height: 56px; font-size: 1.15rem; }
.tool-live.is-large-display .tt-progress-text { display: none; }

@media (max-width: 660px) {
  .tt-practice-groups { grid-template-columns: 1fr; }
  .tt-missed-list { columns: 1; }
}

@media (max-width: 360px) {
  .tt-mode-buttons { grid-template-columns: 1fr; }
  .tt-keypad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-fieldset { padding: .8rem; }
}

@media (forced-colors: active) {
  .tt-mode.is-on, .tt-table-button.is-on, .tool-btn-primary { border: 3px solid ButtonText; }
  .tt-feedback, .tool-callout, .tt-fieldset, .tool-table th, .tool-table td { border-color: CanvasText; }
  .tt-answer:focus-visible, .tt-key:focus-visible, .tt-mode:focus-visible,
  .tt-table-button:focus-visible { outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .times-tables-page *, .times-tables-page *::before, .times-tables-page *::after {
    scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Shareable KS2 arithmetic papers ------------------------------------------ */
.tool-mount[data-tool="sats-arithmetic"] { margin: 1.5rem 0 2rem; padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line, #354156); border-radius: var(--radius, 18px); background: var(--card, #212936); }
.sats-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.sats-paper-number { flex: 1 1 100%; margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 700; }
.sats-btn { min-height: 46px; padding: .65rem 1rem; border: 1px solid var(--accent, #3fd0bf);
  border-radius: .75rem; background: var(--accent, #3fd0bf); color: var(--accent-on, #10131a); font: inherit; font-weight: 800; cursor: pointer; }
.sats-btn-quiet { border-color: var(--line, #354156); background: var(--bg2, #191e27); color: var(--ink, #edeef2); }
.sats-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #3fd0bf) 65%, white); outline-offset: 3px; }
.sats-questions { display: grid; gap: .55rem; padding-left: 2rem; }
.sats-q { position: relative; min-height: 3.2rem; padding: .65rem 5.5rem .65rem .35rem;
  border-bottom: 1px solid var(--line, #354156); break-inside: avoid; }
.sats-q-text { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 700; }
.sats-q-answer { position: absolute; top: .55rem; right: .35rem; min-width: 4.5rem; min-height: 2rem;
  padding: .2rem .45rem; border-bottom: 2px solid var(--ink-soft, #a5aec0); text-align: center; font-weight: 800; }
.sats-q-marks { display: block; color: var(--ink-soft, #a5aec0); font-size: .78rem; }
.sats-status { margin-bottom: 0; color: var(--ink-soft, #a5aec0); }

/* Cross-links between the learning tools ----------------------------------- */
.tool-family { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem; padding: 0; list-style: none; margin: 1.2rem 0; }
.tool-family li { margin: 0; padding: 1rem 1.2rem; border: 1px solid var(--line, #354156);
  border-radius: var(--radius, 18px); background: var(--card, #212936); }
.tool-family h3 { margin-top: 0; }
.tool-family p { margin: .4rem 0 0; color: var(--ink-soft, #a5aec0); font-size: .95rem; }
/* Arrival notice. Sits at the top of the page but is hidden until the
   ks2phonics.org.uk Worker's #from-ks2phonics fragment targets it, so only
   someone who followed an old school link ever sees it. The anchor is exported
   from workers/ks2phonics-redirect/src/index.mjs as ARRIVAL_ANCHOR; if it ever
   changes, this selector changes with it. */
.tool-origin { display: none; margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  border: 1px solid var(--line, #354156);
  border-radius: var(--radius, 18px); background: var(--bg2, #191e27); }
/* The id is on the <article>, not on the notice, and that is load-bearing. The
   browser resolves the fragment scroll before this body-linked stylesheet has
   applied, so a hidden notice is measured at the wrong offset and the visitor
   lands 200-odd pixels below the thing meant to greet them. The article's
   position does not depend on this file, so scrolling to it lands at the top of
   the page with the notice in view. */
#from-ks2phonics:target .tool-origin { display: block; }
#from-ks2phonics:target { scroll-margin-top: 100vh; }  /* on a cold load the pre-webfont
   layout is taller, so the browser lands a few hundred pixels low. A scroll
   margin taller than any viewport clamps that to the top of the page. */
.tool-origin h2 { margin-top: 0; font-size: 1.08rem; }
.tool-origin p { margin: .5rem 0 0; color: var(--ink-soft, #a5aec0); font-size: .94rem; }
.tool-teacher { margin-top: 2rem; }
.tool-teacher ol { color: var(--ink-soft, #a5aec0); }

@media (max-width: 480px) {
  .tool-fault, .tool-spell { width: 100%; text-align: left; }
  .tool-controls .tool-btn { flex: 1 1 100%; }
  .sats-btn { flex: 1 1 100%; }
  .sats-q { padding-right: .35rem; }
  .sats-q-answer { position: static; display: block; width: 5rem; margin-top: .35rem; }
}

@media print {
  .topbar, footer, #bottomnav, #bg-canvas, .sheet, .overlay, .skip-link,
  .tool-controls, .tool-levels, .tool-timer, .tool-own, .tool-family { display: none !important; }
  .tool-live { border: 1px solid #999; background: #fff; }
  .tool-page { color: #000; }
  .tt-toolbar, .tt-live-status, .tt-panel { display: none !important; }
  .sats-bar .sats-btn, .sats-status { display: none !important; }
  .tool-mount[data-tool="sats-arithmetic"] { padding: 0; border: 0; background: #fff; }
  .sats-q { color: #000; border-color: #999; }
  .tt-practice-groups { grid-template-columns: repeat(3, 1fr); }
  .tt-practice-groups section, .tt-answer-key, .tool-table { background: #fff; color: #000; }
}
/* Network-share padding keeps stale SMB tail bytes inert after shorter edits. */
/* padding 01 */
/* padding 02 */
/* padding 03 */
/* padding 04 */
/* padding 05 */
/* padding 06 */
/* padding 07 */
/* padding 08 */
/* padding 09 */
/* padding 10 */
/* padding 11 */
/* padding 12 */
/* padding 13 */
/* padding 14 */
/* padding 15 */
/* padding 16 */
/* padding 17 */
/* padding 18 */
/* padding 19 */
/* padding 20 */