/* THcount shared shell: self-hosted fonts, theme tokens, header and footer.
   Loaded on every page. Rules are scoped to .tc-* classes so tool pages that still
   load the legacy site.css keep their own tool styling. */

@font-face{font-family:"Noto Serif Thai";src:url("/fonts/noto-serif-thai-100-900-thai.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"Noto Serif Thai";src:url("/fonts/noto-serif-thai-100-900-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-400-thai.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-400-latin.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-500-thai.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-500-latin.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-600-thai.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap;unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC}
@font-face{font-family:"IBM Plex Sans Thai";src:url("/fonts/ibm-plex-sans-thai-600-latin.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist";src:url("/fonts/geist-100-900-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono-100-900-latin.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
    --tc-bg: #ffffff;
    --tc-bg-2: #fafafa;
    --tc-card: #f7f7f8;
    --tc-card-2: #ffffff;
    --tc-line: rgb(10 10 11 / .08);
    --tc-line-2: rgb(10 10 11 / .15);
    --tc-text: #0a0a0b;
    --tc-text-2: #3f3f46;
    --tc-muted: #52525b;
    --tc-dim: #6b6b73;
    --tc-soft: #8a8a93;
    --tc-rose: #f0457c;
    --tc-rose-2: #ff8fb1;
    --tc-rose-deep: #c2255c;
    --tc-rose-text: #c2255c;
    --tc-ov-1: rgb(10 10 11 / .03);
    --tc-ov-2: rgb(10 10 11 / .055);
    --tc-ov-3: rgb(10 10 11 / .1);
    --tc-glass: rgb(255 255 255 / .8);
    --tc-btn-bg: #0a0a0b;
    --tc-btn-fg: #ffffff;
    --tc-btn-hover: #27272a;
    --tc-metal: linear-gradient(180deg, #0a0a0b 20%, #3f3f46 70%, #6b6b73);
    /* Headline numbers: bright pink to coral, with no dark stop. */
    --tc-number: linear-gradient(165deg, #f8367f 0%, #ff4f6e 52%, #fb6a3c 100%);
    --tc-number-glow: drop-shadow(0 8px 18px rgb(248 54 127 / .24));
    --tc-halo: -300px -26px 120px -44px rgb(255 189 63 / .46), 0 -26px 120px -34px rgb(238 96 147 / .4), 300px -26px 120px -44px rgb(101 87 217 / .38), inset 0 50px 90px -40px rgb(238 96 147 / .1);
    --tc-serif: "Noto Serif Thai", Georgia, serif;
    --tc-sans: Geist, "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
    --tc-mono: "Geist Mono", "IBM Plex Sans Thai", ui-monospace, monospace;
    --tc-wrap: 1152px;
    --tc-header-height: 72px;

    /* THcount's original multi-colour palette. The *-text values pass 4.5:1 on white. */
    --tc-purple: #6557d9;
    --tc-cyan: #27b8cd;
    --tc-teal: #39b98a;
    --tc-lime: #9ac94b;
    --tc-sun: #ffbd3f;
    --tc-coral: #ff715e;
    --tc-pink: #ee6093;
    --tc-purple-text: #5445c9;
    --tc-cyan-text: #0b7285;
    --tc-teal-text: #1b7a59;
    --tc-sun-text: #8f5d00;
    --tc-coral-text: #c23b28;
    --tc-pink-text: #c2255c;
    --tc-rainbow: linear-gradient(90deg, var(--tc-sun), var(--tc-coral), var(--tc-pink), var(--tc-purple), var(--tc-cyan), var(--tc-teal));
    --tc-rainbow-text: linear-gradient(90deg, #e0562f, #d93f7a 34%, #6557d9 68%, #1594a8);

    /* Current accent. Elements with data-category-key switch it to their category colour. */
    --acc: var(--tc-purple);
    --acc-rgb: 101 87 217;
    --acc-text: var(--tc-purple-text);
}

[data-category-key="word-tools"] {
    --acc: var(--tc-purple);
    --acc-rgb: 101 87 217;
    --acc-text: var(--tc-purple-text);
}

[data-category-key="math-tools"] {
    --acc: var(--tc-cyan);
    --acc-rgb: 39 184 205;
    --acc-text: var(--tc-cyan-text);
}

[data-category-key="business-and-financial-tools"] {
    --acc: var(--tc-teal);
    --acc-rgb: 57 185 138;
    --acc-text: var(--tc-teal-text);
}

[data-category-key="datetime-tools"] {
    --acc: var(--tc-pink);
    --acc-rgb: 238 96 147;
    --acc-text: var(--tc-pink-text);
}

[data-category-key="health-tools"] {
    --acc: var(--tc-coral);
    --acc-rgb: 255 113 94;
    --acc-text: var(--tc-coral-text);
}

[data-category-key="construction-tools"] {
    --acc: var(--tc-sun);
    --acc-rgb: 255 189 63;
    --acc-text: var(--tc-sun-text);
}

html {
    scroll-padding-top: calc(var(--tc-header-height) + 16px);
}

.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--tc-btn-bg);
    color: var(--tc-btn-fg);
    font: 500 15px/1.4 var(--tc-sans);
    text-decoration: none;
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

/* ---------- header: full bar that narrows into a glass pill after scrolling ---------- */
.tc-header,
.tc-footer {
    font-family: var(--tc-sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--tc-text);
    -webkit-font-smoothing: antialiased;
}

.tc-header *,
.tc-footer * {
    box-sizing: border-box;
}

.tc-header a,
.tc-footer a {
    color: inherit;
    text-decoration: none;
}

.tc-header :focus-visible,
.tc-footer :focus-visible {
    outline: 2px solid var(--tc-purple-text);
    outline-offset: 3px;
    border-radius: 8px;
}

.tc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    height: var(--tc-header-height);
    margin: 0;
    padding: 8px 0;
    border: 0;
    background: none;
    box-shadow: none;
    pointer-events: none;
}

/* The original site's colour stripe, kept as a thin line across the top. */
.tc-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--tc-rainbow);
}

.tc-header-in {
    display: flex;
    align-items: center;
    gap: 22px;
    width: min(var(--tc-wrap), 100% - 32px);
    height: 56px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    pointer-events: auto;
    transition: width .45s cubic-bezier(.2, .8, .2, 1), background-color .3s, border-color .3s, padding .3s;
}

.tc-scrolled .tc-header-in {
    width: min(900px, 100% - 24px);
    padding: 0 8px 0 16px;
    border-color: var(--tc-line-2);
    background: var(--tc-glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}

.tc-brand {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 44px;
}

.tc-logo {
    display: block;
    width: auto;
    height: 36px;
}

.tc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

.tc-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--tc-muted);
    white-space: nowrap;
    transition: color .2s, background-color .2s;
}

.tc-nav a:hover {
    color: var(--tc-text);
    background: var(--tc-ov-1);
}

.tc-nav a[aria-current] {
    color: var(--tc-text);
    font-weight: 500;
}

.tc-nav a[aria-current]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--tc-coral), var(--tc-pink), var(--tc-purple), var(--tc-cyan));
}

.tc-search {
    display: flex;
    align-items: center;
    width: 220px;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0 4px 0 14px;
    border: 0;
    border-radius: 12px;
    background: var(--tc-ov-2);
    box-shadow: inset 0 0 0 1px var(--tc-line);
    transition: width .3s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s;
}

.tc-search:focus-within {
    width: 280px;
    background: var(--tc-card-2);
    box-shadow: inset 0 0 0 1px var(--tc-purple), 0 0 0 4px rgb(101 87 217 / .14);
}

.tc-search input {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    color: var(--tc-text);
    font: 400 15px/1 var(--tc-sans);
    appearance: none;
    -webkit-appearance: none;
}

.tc-search input::placeholder {
    color: var(--tc-dim);
    opacity: 1;
}

.tc-search button {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    min-width: 0;
    height: 34px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: none;
    box-shadow: none;
    color: var(--tc-muted);
    cursor: pointer;
}

.tc-search button:hover {
    background: var(--tc-ov-2);
    color: var(--tc-text);
}

.tc-search svg {
    width: 17px;
    height: 17px;
}

.tc-lang {
    display: flex;
    flex: none;
    height: 40px;
    margin: 0;
    padding: 3px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--tc-line);
    font-size: 13.5px;
}

.tc-lang a {
    display: grid;
    place-items: center;
    min-width: 42px;
    padding: 0 10px;
    border-radius: 9px;
    color: var(--tc-muted);
}

.tc-lang a[aria-current] {
    background: var(--tc-btn-bg);
    color: var(--tc-btn-fg);
    font-weight: 500;
}

/* ---------- footer ---------- */
.tc-footer {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 56px 0 44px;
    border: 0;
    border-top: 1px solid var(--tc-line);
    border-radius: 0;
    background: var(--tc-bg-2);
    box-shadow: none;
}

.tc-footer::before {
    content: "";
    position: absolute;
    inset: -1px 0 auto;
    height: 3px;
    background: var(--tc-rainbow);
}

.tc-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 40px;
    width: min(var(--tc-wrap), 100% - 32px);
    margin: 0 auto;
    padding: 0;
}

.tc-footer p {
    margin: 0;
    color: var(--tc-muted);
    font-size: 14.5px;
}

.tc-footer-brand {
    display: grid;
    gap: 12px;
    align-content: start;
    max-width: 340px;
}

.tc-footer-brand .tc-logo {
    height: 34px;
}

.tc-footer .tc-footer-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--tc-card-2);
    box-shadow: inset 0 0 0 1px var(--tc-line);
    color: var(--tc-text-2);
}

.tc-footer-note span {
    flex: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: rgb(57 185 138 / .18);
    color: var(--tc-teal-text);
    font-size: 11px;
}

.tc-footer-group {
    display: grid;
    gap: 2px;
    align-content: start;
    margin: 0;
    padding: 0;
}

.tc-footer-group h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: var(--tc-dim);
    font: 500 12.5px/1.4 var(--tc-mono);
    letter-spacing: 0;
}

.tc-footer-group h2::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tc-purple);
}

.tc-footer-categories h2::before {
    background: var(--tc-pink);
}

.tc-footer-group:last-child h2::before {
    background: var(--tc-cyan);
}

.tc-footer-group a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    min-height: 36px;
    color: var(--tc-text-2);
    font-size: 15px;
    transition: color .2s;
}

.tc-footer-categories a::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acc);
}

.tc-footer-group a:hover,
.tc-footer-group a[aria-current] {
    color: var(--acc-text);
}

@media (max-width: 860px) {
    :root {
        --tc-header-height: 108px;
    }

    /* Not sticky on phones, but still stacked above page content that slides under it. */
    .tc-header {
        position: relative;
        height: auto;
        padding: 6px 0 0;
    }

    .tc-header-in {
        flex-wrap: wrap;
        gap: 0 8px;
        height: auto;
        padding: 0;
    }

    .tc-brand {
        margin-right: auto;
    }

    .tc-search {
        order: 2;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        justify-content: center;
    }

    .tc-search:focus-within {
        width: 44px;
        box-shadow: inset 0 0 0 1px var(--tc-line-2);
    }

    .tc-search input {
        display: none;
    }

    .tc-search button {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .tc-lang {
        order: 1;
        height: 44px;
    }

    .tc-nav {
        order: 3;
        width: 100%;
        gap: 0;
        margin-top: 2px;
        border-top: 1px solid var(--tc-line);
    }

    .tc-nav a {
        flex: 1;
        justify-content: center;
        padding: 0 6px;
        border-radius: 0;
    }

    .tc-nav a[aria-current]::after {
        left: 22%;
        right: 22%;
        bottom: 4px;
    }

    .tc-footer {
        padding: 40px 0 36px;
    }

    .tc-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
    }

    .tc-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }

    .tc-footer-group a {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-header *,
    .tc-footer * {
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
    }
}