/* /tax-tools/ hub only (prefix th-). Loaded after tax-calculator.css, which supplies the shared tc- bands, chips, FAQ and link cards. */
.th-page [id] { scroll-margin-top: 150px; }
.tc-page.th-page .tc-hero.sd-rd-hero { padding-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.th-jump { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; margin: 1.5rem 0 0; }
.th-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 1.1rem; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid #cfe0fb; color: #1e3a8a; font-weight: 600; font-size: 0.95rem; text-decoration: none; }
.th-jump a:focus-visible, .th-filter-btn:focus-visible, .th-page .tt-rd-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) { .th-jump a:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } }

/* calculators: two large tool cards */
.th-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 760px) { .th-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
.th-tool { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.25rem, 3vw, 1.75rem); background: linear-gradient(180deg, #eef4ff 0%, #ffffff 65%); border: 1px solid #dbe6f8; border-radius: 20px; box-shadow: 0 10px 28px rgba(30, 64, 175, 0.08); }
.th-tool-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1rem; border-radius: 14px; background: #1d4ed8; color: #fff; }
.th-tool-icon svg { width: 1.7rem; height: 1.7rem; }
.th-tool h3 { margin: 0 0 0.4rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.35rem; }
.th-tool p { margin: 0 0 0.6rem; color: #334155; }
.th-tool .th-tool-meta { margin-bottom: 1.25rem; font-size: 0.9rem; font-weight: 600; color: #475569; }
.th-tool .svc-rd-btn { margin-top: auto; }
.th-sub { margin-top: 2.25rem; }

/* the whole card is the link: the button's ::after stretches over the card (no script), and the card moves like a service card */
.th-tool { position: relative; cursor: pointer; }
.th-tool .svc-rd-btn::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.th-tool .svc-rd-btn:hover, .th-tool .svc-rd-btn:active { transform: none; box-shadow: none; } /* a moving button would shrink the stretched area */
.th-tool:has(.svc-rd-btn:focus-visible) { outline: 2px solid #2563eb; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .th-tool { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
    .th-tool .th-tool-icon { transition: background 0.25s, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
    .th-tool:hover { z-index: 2; transform: translateY(-6px) scale(1.02); border-color: #93b4f5; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1), 0 14px 26px -6px rgba(15, 23, 42, 0.26), 0 32px 56px -14px rgba(37, 99, 235, 0.32); }
    .th-tool:hover .th-tool-icon { background: linear-gradient(135deg, #2563eb, #06b6d4); transform: rotate(-6deg) scale(1.08); }
    .th-tool:hover .svc-rd-btn { background: #1d4ed8; }
    .th-tool:active { transform: translateY(-2px) scale(0.99); }
}

/* checklist: the existing tool, restyled to match */
.th-page .tt-rd-tabs.th-tabs { justify-content: flex-start; margin: 1.5rem 0 1.25rem; }
.th-page .tt-rd-tab { min-height: 44px; display: inline-flex; align-items: center; padding: 0.4rem 1.15rem; font-size: 0.95rem; background: #fff; border-color: #cbd5e1; color: #1e293b; }
.th-page .tt-rd-tab.is-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
@media (hover: hover) { .th-page .tt-rd-tab:not(.is-active):hover { border-color: #1d4ed8; color: #1d4ed8; background: #fff; } }
.th-page .tt-rd-panel-card.th-panel { max-width: none; margin: 0; border-color: #dbe6f8; border-radius: 20px; box-shadow: 0 10px 28px rgba(30, 64, 175, 0.07); }
.th-page .tt-rd-panel-head h3 { margin: 0 0 0.35rem; }
.th-page .tt-rd-panel-head > div:first-child p { margin: 0; font-size: 0.95rem; color: #475569; }
.th-page .tt-rd-readiness-label { font-size: 0.72rem; color: #64748b; }
.th-page .tt-rd-readiness-count { font-size: 0.9rem; }
.th-page .tt-rd-category { font-size: 0.8rem; color: #1d4ed8; }
.th-page .tt-rd-item-title { font-size: 1rem; }
.th-page .tt-rd-item-desc { font-size: 0.9rem; }
.th-page .tt-rd-essential { font-size: 0.7rem; }
.th-page .tt-rd-note { font-size: 0.92rem; }
.th-page .tt-rd-panel-foot span { font-size: 0.95rem; }
@media (min-width: 900px) { .th-page .tt-rd-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* deadlines: one divided list with a date column, filterable by type */
.th-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 1rem; }
.th-filter-btn { min-height: 44px; padding: 0.4rem 1.15rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #1e293b; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.th-filter-btn.is-active { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
@media (hover: hover) { .th-filter-btn:not(.is-active):hover { border-color: #1d4ed8; color: #1d4ed8; } }
.th-dates { list-style: none; display: grid; gap: 1px; margin: 0; padding: 0; background: #dbe6f8; border: 1px solid #dbe6f8; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.th-date { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .th-date { grid-template-columns: 14rem minmax(0, 1fr); } }
.th-date-when { display: flex; align-items: center; padding: 1rem 1.25rem 0.2rem; background: #fff; color: #1e3a8a; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.th-date-body { padding: 0.4rem 1.25rem 1rem; background: #fff; }
@media (min-width: 760px) { .th-date-when { padding: 1rem 1.25rem; background: #eef4ff; } .th-date-body { padding: 1rem 1.25rem; } }
.th-date-body h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.th-date-body p { margin: 0; color: #334155; }
.th-date-tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.6rem; border: 1px solid #dbeafe; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.th-reminder { display: flex; align-items: flex-start; gap: 0.7rem; margin-top: 1.25rem; padding: 0.9rem 1.1rem; background: #f1f6ff; border: 1px solid #dbe6f8; border-radius: 12px; color: #334155; }
.th-reminder svg { flex-shrink: 0; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; color: #1d4ed8; }
.th-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 1.5rem; font-weight: 600; color: #0f172a; }

/* tips: three plain tiles, no numbers (they are not a sequence) */
.th-tips { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.25rem 0 0; padding: 0; }
@media (min-width: 900px) { .th-tips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.th-tip { padding: 1.25rem 1.4rem; background: #fff; border: 1px solid #dbe6f8; border-radius: 16px; }
.th-tip-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #dbeafe; color: #1d4ed8; }
.th-tip-icon svg { width: 1.4rem; height: 1.4rem; }
.th-tip h3 { margin: 0.85rem 0 0.35rem; }
.th-tip p { margin: 0; color: #334155; }
.th-tips + .th-cta-row { margin-top: 1.75rem; }
@media (max-width: 600px) {
    .tc-page.th-page .tc-hero.sd-rd-hero { padding: 1rem 0 2rem; }
    .th-jump { margin-top: 1rem; }
    .th-tool, .th-tip { padding: 1.1rem 1.05rem; }
    .th-date-tag { margin-left: 0; }
}

/* deadline list: shortened at first, with a fade and a "show more" button; filter chips carry their counts */
.th-count { display: inline-block; min-width: 1.5em; margin-left: 0.4rem; padding: 0 0.4em; border-radius: 999px; background: #eef4ff; color: #1e3a8a; font-size: 0.8rem; font-weight: 700; line-height: 1.5; text-align: center; }
.th-filter-btn.is-active .th-count { background: #fff; color: #1d4ed8; }
.th-dates-wrap { position: relative; }
.th-dates-wrap.is-collapsed::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 5.5rem; border-radius: 0 0 17px 17px; background: linear-gradient(to top, #ffffff 15%, rgba(255, 255, 255, 0)); pointer-events: none; }
.th-more-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; margin-top: 1rem; }
.th-more-note { margin: 0; font-size: 0.9rem; color: #475569; }
.th-more-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 46px; padding: 0.4rem 1.3rem; border: 1px solid #1d4ed8; border-radius: 999px; background: #fff; color: #1d4ed8; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.th-more-btn svg { width: 1.1rem; height: 1.1rem; transition: transform 0.25s ease; }
.th-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.th-more-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) { .th-more-btn:hover { background: #1d4ed8; color: #fff; } }
.th-more-btn:active { transform: scale(0.97); }

/* help cards: compact, with a calm hover (border, white fill, small arrow slide) and a short one-time rise-in */
.th-help { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; margin: 1.25rem 0 0; padding: 0; }
@media (min-width: 640px) { .th-help { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .th-help { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.th-help li { display: flex; }
.th-help-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.35rem 0.8rem; flex: 1 1 auto; padding: 1rem 1.1rem; background: #f1f6ff; border: 1px solid #dbe6f8; border-radius: 14px; text-decoration: none; color: #0f172a; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.4s ease, translate 0.4s ease; }
.th-help-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: #1d4ed8; transition: background-color 0.2s ease, color 0.2s ease; }
.th-help-icon svg { width: 1.25rem; height: 1.25rem; }
.th-help-name { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.th-help-text { grid-column: 1 / -1; margin: 0.15rem 0 0.2rem; font-size: 0.95rem; line-height: 1.5; color: #334155; }
.th-help-more { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 0.35rem; color: #1d4ed8; font-size: 0.95rem; font-weight: 700; }
.th-help-more svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.th-help-card:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-color: #93b4f5; background: #fff; }
@media (hover: hover) {
    .th-help-card:hover { background: #fff; border-color: #93b4f5; box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.35); }
    .th-help-card:hover .th-help-icon { background: #1d4ed8; color: #fff; }
    .th-help-card:hover .th-help-more svg { transform: translateX(3px); }
}
/* the script adds th-reveal only when motion is allowed; without it the cards are simply there */
.th-help-card.th-reveal { opacity: 0; translate: 0 10px; transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 50ms), calc(var(--i, 0) * 50ms); }
.th-help-card.th-reveal.is-in { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
    .th-help-card, .th-help-icon, .th-help-more svg, .th-more-btn, .th-more-btn svg { transition: none; }
}