/* Free public calculators (/tools/) and the invite page. */
.tool-page { max-width: 820px; margin: 0 auto; display: grid; gap: 2rem; }
.tool-crumbs a { font-size: .9rem; color: var(--color-text-muted); text-decoration: none; }
.tool-crumbs a::before { content: "\2190\00a0"; }
.tool-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .7rem; }
.tool-lede { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--color-text-soft); }

.tool-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; padding: 1.5rem; border-radius: 18px; border: 1px solid var(--color-border); background: var(--color-surface); }
.tool-form > .btn { grid-column: 1 / -1; justify-self: start; }
.tool-form--rows { grid-template-columns: minmax(0, 1fr); }
.tool-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; margin: 0; padding: 0; border: 0; }
.tool-field { display: grid; gap: .35rem; align-content: start; }
.tool-field label { font-weight: 700; color: var(--color-text); }
.tool-field input, .tool-field select { width: 100%; padding: .65rem .75rem; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-soft, transparent); color: var(--color-text); font-size: 1rem; }
.tool-field input:focus, .tool-field select:focus { outline: 3px solid var(--color-accent-soft); border-color: var(--color-brand); }
.tool-field small { color: var(--color-text-muted); font-size: .85rem; }

.tool-result { display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 18px; border: 1px solid rgba(167, 139, 250, .55); background: linear-gradient(170deg, rgba(124, 58, 237, .16), transparent); }
.tool-answer { display: grid; gap: .2rem; }
.tool-answer__label { color: var(--color-text-muted); font-weight: 600; }
.tool-answer__value { font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--color-text); line-height: 1.05; }
.tool-answer__meta { font-weight: 700; color: var(--color-brand-soft); }
.theme-light .tool-answer__meta { color: #5b21b6; }
.tool-table { width: 100%; border-collapse: collapse; }
.tool-table caption { text-align: left; color: var(--color-text-muted); padding-bottom: .5rem; }
.tool-table th, .tool-table td { text-align: left; padding: .55rem .4rem; border-top: 1px solid var(--color-divider); }
.tool-table tbody th { font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--color-text); background: none; }
.tool-table td { background: none; }
.tool-table thead th { color: var(--color-text-muted); font-size: .85rem; font-weight: 600; border-top: 0; }
.tool-errors { margin: 0; padding-left: 1.2rem; color: var(--color-danger); }
.tool-note { margin: 0; font-size: .88rem; color: var(--color-text-muted); }

.tool-explainer h2, .tool-faq h2, .tool-more h2, .tool-cta h2 { font-size: 1.35rem; margin: 0 0 .7rem; }
.tool-explainer p { color: var(--color-text-soft); line-height: 1.65; }
.tool-cta { padding: 1.75rem; border-radius: 20px; color: #fff; background: radial-gradient(circle at 15% 0, rgba(167, 139, 250, .45), transparent 55%), linear-gradient(135deg, #3b1a7a, #1e1446); }
.tool-cta h2 { color: #fff !important; }
.tool-cta p { color: #ddd6fe; margin: 0 0 1.2rem; line-height: 1.6; }
.tool-cta .lp-btn-primary { background: #fff !important; color: #4c1d95 !important; }

.tool-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.tool-list a, .tool-list a:hover { text-decoration: none; }
.tool-list a { display: grid; align-content: start; height: 100%; box-sizing: border-box; gap: .25rem; padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px solid var(--color-divider); text-decoration: none; color: inherit; background: var(--color-surface); }
.tool-list a:hover, .tool-list a:focus-visible { border-color: var(--color-brand); }
.tool-list strong { color: var(--color-text); }
.tool-list span { color: var(--color-text-muted); font-size: .95rem; }

.invite-share { display: grid; gap: .75rem; }
.invite-share__link { display: flex; gap: .5rem; flex-wrap: wrap; }
.invite-share__link input { flex: 1 1 260px; min-width: 0; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--color-border); background: var(--color-bg-soft, transparent); color: var(--color-text); }

.tool-table-wrap { overflow-x: auto; }
.guide-page > * { min-width: 0; }
.tool-table--grid th, .tool-table--grid td { white-space: nowrap; }
.guide-page .tool-explainer a { color: var(--color-brand-soft); }
.theme-light .guide-page .tool-explainer a { color: #5b21b6; }

@media (max-width: 640px) {
  .tool-form, .tool-row { grid-template-columns: minmax(0, 1fr); }
  .tool-form, .tool-result { padding: 1.1rem; }
  main .tool-table--grid th, main .tool-table--grid td { padding: .5rem .3rem; font-size: .9rem; }
}
/* Beat the app-wide link and table styles. */
main .tool-list a, main .tool-list a * { text-decoration: none !important; }
main .tool-table tbody th { font-size: 1rem; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--color-text); }

/* GCSE and A-Level grade calculators */
.tool-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-boundaries { display: grid; gap: .9rem; padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--color-divider); }
.tool-boundaries[open] { gap: .9rem; }
.tool-boundaries summary { cursor: pointer; font-weight: 700; color: var(--color-text); }
.tool-boundaries > * + * { margin-top: .9rem; }
.tool-boundary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .75rem; }
@media (max-width: 640px) {
  .tool-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tool-cta__demo { margin-left: 1rem; color: #ddd6fe; font-weight: 700; }
.tool-cta__demo:hover { color: #fff; }

/* GPA calculator: two forms on one page */
.tool-subhead { font-size: 1.35rem; margin: 0 0 -1rem; scroll-margin-top: 5rem; }
.tool-form > .tool-note { margin: 0; }
.guide-steps { margin: .5rem 0 0; padding-left: 1.4rem; display: grid; gap: .6rem; color: var(--color-text-soft); line-height: 1.6; }
.guide-steps strong { color: var(--color-text); }