/*
 * Styles for the public tool pages (/tools and /tools/{slug}).
 *
 * WHY THIS FILE EXISTS
 * The theme ships a pre-built stylesheet (modern-theme/assets/css/main.css),
 * not a live Tailwind compiler, so a utility class only works if it happens to
 * be in that build. It is a curated subset: `text-secondary/70`, `pt-[130px]`,
 * `leading-relaxed`, `text-right` and about forty others resolve to nothing.
 * The first version of these pages leaned on exactly those, which is why they
 * rendered as unstyled text. Adding classes to the markup cannot fix that
 * without re-running the theme's Vite build on every deploy.
 *
 * So anything the build does not cover is defined here instead, as named
 * component classes rather than re-implementations of Tailwind utilities -
 * a `.tp-muted` that resolves is worth more than a `text-secondary/70` that
 * silently does not. Utilities that ARE in the build (flex, grid, gap-*,
 * rounded-2xl, mb-*, the btn/badge/main-container components) are still used
 * in the markup; this only fills the gaps.
 *
 * Colours come from the theme's own custom properties, so light/dark and any
 * future palette change follow the rest of the site automatically. Dark mode
 * is triggered by `.dark` on a wrapping element, matching the theme.
 */

/* ---------------------------------------------------------------- text --- */

.tp-lead {
    line-height: 1.9;
    color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
}

.dark .tp-lead {
    color: color-mix(in srgb, var(--color-accent) 72%, transparent);
}

.tp-muted {
    color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
}

.dark .tp-muted {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

.tp-faint {
    color: color-mix(in srgb, var(--color-secondary) 42%, transparent);
}

.dark .tp-faint {
    color: color-mix(in srgb, var(--color-accent) 42%, transparent);
}

.tp-ghost {
    color: color-mix(in srgb, var(--color-secondary) 32%, transparent);
}

.dark .tp-ghost {
    color: color-mix(in srgb, var(--color-accent) 32%, transparent);
}

.tp-strong {
    color: var(--color-secondary);
}

.dark .tp-strong {
    color: var(--color-accent);
}

.tp-xs {
    font-size: 11px;
    line-height: 1.7;
}

.tp-sm {
    font-size: 12.5px;
    line-height: 1.8;
}

/* --------------------------------------------------------------- layout -- */

.tp-section {
    padding-block: 64px;
}

.tp-hero {
    padding-block: 130px 56px;
}

@media (min-width: 1024px) {
    .tp-section {
        padding-block: 90px;
    }

    .tp-hero {
        padding-block: 180px 80px;
    }
}

.tp-bg-1 {
    background-color: var(--color-background-1);
}

.dark .tp-bg-1 {
    background-color: var(--color-background-5);
}

.tp-bg-2 {
    background-color: var(--color-background-2);
}

.dark .tp-bg-2 {
    background-color: var(--color-background-7);
}

.tp-bg-3 {
    background-color: var(--color-background-3);
}

.dark .tp-bg-3 {
    background-color: var(--color-background-5);
}

.tp-prose {
    max-width: 820px;
    margin-inline: auto;
}

.tp-narrow {
    max-width: 620px;
}

/* ---------------------------------------------------------------- cards -- */

.tp-card {
    border: 1px solid var(--color-stroke-1);
    border-radius: 16px;
    background-color: var(--color-background-1);
    transition: border-color 200ms ease;
}

.dark .tp-card {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-5);
}

.tp-card:hover,
.tp-card[open] {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent);
}

.tp-rule {
    border-block: 1px solid var(--color-stroke-1);
}

.dark .tp-rule {
    border-color: var(--color-stroke-6);
}

.tp-badge-round {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary-500);
    background-color: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
}

.dark .tp-badge-round {
    background-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
}

/* CTA band at the foot of each tool page. */
.tp-band {
    border: 1px solid var(--color-stroke-1);
    border-radius: 28px;
    background-color: var(--color-background-3);
    padding: 48px 24px;
    text-align: center;
}

.dark .tp-band {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-7);
}

@media (min-width: 768px) {
    .tp-band {
        padding-inline: 48px;
    }
}

/* ------------------------------------------------------------------ faq -- */

/* <details> rather than a scripted accordion: it opens with the keyboard,
   survives a failed script, and the answer text is in the DOM either way. */
.tp-faq {
    padding: 16px 20px;
}

.tp-faq>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    color: var(--color-secondary);
}

.dark .tp-faq>summary {
    color: var(--color-accent);
}

.tp-faq>summary::-webkit-details-marker {
    display: none;
}

.tp-faq>summary:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 4px;
    border-radius: 6px;
}

.tp-chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary-500);
    transition: transform 200ms ease;
}

.tp-faq[open] .tp-chevron {
    transform: rotate(180deg);
}

.tp-answer {
    margin-top: 12px;
    line-height: 1.9;
    color: color-mix(in srgb, var(--color-secondary) 70%, transparent);
}

.dark .tp-answer {
    color: color-mix(in srgb, var(--color-accent) 70%, transparent);
}

/* --------------------------------------------------- interface preview --- */

/* A drawing of the product's own panel. Nothing in it is interactive; see the
   partial for why this is a reconstruction rather than a screenshot. */
.tp-mock {
    width: 100%;
    max-width: 420px;
    padding: 20px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 20px;
    background-color: var(--color-background-1);
    box-shadow: 0 24px 60px -24px rgb(15 23 42 / 22%);
    user-select: none;
    pointer-events: none;
}

.dark .tp-mock {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-5);
    box-shadow: 0 24px 60px -24px rgb(0 0 0 / 70%);
}

.tp-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 12px;
    background-color: var(--color-background-2);
}

.dark .tp-field {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-7);
}

.tp-drop {
    padding: 20px 12px;
    text-align: center;
    border: 1px dashed var(--color-stroke-2);
    border-radius: 12px;
    background-color: color-mix(in srgb, var(--color-background-2) 60%, transparent);
}

.dark .tp-drop {
    border-color: var(--color-stroke-6);
    background-color: color-mix(in srgb, var(--color-background-7) 60%, transparent);
}

.tp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-primary-500);
    background-color: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
}

.tp-cta-mock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background-image: linear-gradient(to left, var(--color-primary-600), var(--color-primary-400));
}

.tp-count {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

/* ------------------------------------------------------------- a11y/mo --- */

#faq {
    scroll-margin-top: 112px;
}

@media (prefers-reduced-motion: reduce) {

    .tp-card,
    .tp-chevron {
        transition: none;
    }
}

/* The theme's build stops at md:grid-cols-3, and the spec strip needs four
   columns on tablet and up. */
@media (min-width: 768px) {
    .tp-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ------------------------------------------------------------ features --- */

/* A capability grid. Every entry is a feature that genuinely exists inside
   the tool's own interface - the label is the product's own wording. */
.tp-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 16px;
    background-color: var(--color-background-1);
    transition: border-color 200ms ease, transform 200ms ease;
}

.dark .tp-feature {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-5);
}

.tp-feature:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent);
    transform: translateY(-2px);
}

.tp-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    color: var(--color-primary-500);
    background-color: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
}

.dark .tp-icon {
    background-color: color-mix(in srgb, var(--color-primary-500) 22%, transparent);
}

.tp-icon svg {
    width: 20px;
    height: 20px;
}

/* "به زودی" and similar status notes on a feature that is not live yet.
   Saying so is the difference between a roadmap and a false claim. */
.tp-soon {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    vertical-align: middle;
    color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
    background-color: color-mix(in srgb, var(--color-secondary) 9%, transparent);
}

.dark .tp-soon {
    color: color-mix(in srgb, var(--color-accent) 60%, transparent);
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* -------------------------------------------------------------- steps ---- */

.tp-step {
    position: relative;
    padding: 22px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 18px;
    background-color: var(--color-background-1);
}

.dark .tp-step {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-5);
}

.tp-step-n {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background-image: linear-gradient(to left, var(--color-primary-600), var(--color-primary-400));
}

/* --------------------------------------------------------------- tags ---- */

/* Format / option chips. Outline rather than filled so a row of eight of
   them does not read as eight buttons. */
.tp-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 999px;
    font-size: 12.5px;
    color: color-mix(in srgb, var(--color-secondary) 72%, transparent);
    background-color: var(--color-background-1);
}

.dark .tp-tag {
    border-color: var(--color-stroke-6);
    color: color-mix(in srgb, var(--color-accent) 72%, transparent);
    background-color: var(--color-background-5);
}

/* ---------------------------------------------------------- hero glow ---- */

/* A single soft tint behind the hero. Positioned, not animated: it must not
   move on scroll and must not push the LCP element around. */
.tp-hero {
    position: relative;
}

.tp-hero::before {
    content: "";
    position: absolute;
    inset-block-start: -20%;
    inset-inline-start: -10%;
    width: 620px;
    height: 620px;
    max-width: 90vw;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
            color-mix(in srgb, var(--color-primary-500) 14%, transparent) 0%,
            transparent 68%);
}

.dark .tp-hero::before {
    background: radial-gradient(circle,
            color-mix(in srgb, var(--color-primary-500) 20%, transparent) 0%,
            transparent 68%);
}

.tp-hero>* {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .tp-feature:hover {
        transform: none;
    }
}

/* ------------------------------------------------ mock sub-components --- */

/* Small square tiles inside a mock, standing in for the tool buttons the
   real panels show under their generate form. */
.tp-tile {
    padding: 10px 8px;
    text-align: center;
    border: 1px solid var(--color-stroke-1);
    border-radius: 10px;
    background-color: var(--color-background-2);
}

.dark .tp-tile {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-7);
}

.tp-tile svg {
    width: 16px;
    height: 16px;
    margin-inline: auto;
    margin-block-end: 5px;
    color: var(--color-primary-500);
}

/* A row of bars standing in for an audio waveform. Static heights, set
   inline: an animated one would be motion nobody asked for. */
.tp-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 40px;
}

.tp-bar {
    flex: 1;
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--color-primary-500) 55%, transparent);
}

/* An on/off control drawn in its "on" position. */
.tp-switch {
    position: relative;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
    border-radius: 999px;
    background-image: linear-gradient(to left, var(--color-primary-600), var(--color-primary-400));
}

.tp-switch::after {
    content: "";
    position: absolute;
    inset-block-start: 3px;
    inset-inline-start: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: #fff;
}

/* Before/after halves of one image frame. */
.tp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    border: 1px solid var(--color-stroke-1);
    border-radius: 12px;
}

.dark .tp-split {
    border-color: var(--color-stroke-6);
}

.tp-split>div {
    display: grid;
    place-items: center;
    height: 128px;
    font-size: 11px;
}

.tp-split>div:first-child {
    color: color-mix(in srgb, var(--color-secondary) 42%, transparent);
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--color-secondary) 8%, transparent) 0 4px,
            transparent 4px 8px),
        var(--color-background-2);
}

.dark .tp-split>div:first-child {
    color: color-mix(in srgb, var(--color-accent) 42%, transparent);
    background:
        repeating-linear-gradient(45deg,
            color-mix(in srgb, var(--color-accent) 8%, transparent) 0 4px,
            transparent 4px 8px),
        var(--color-background-7);
}

.tp-split>div:last-child {
    color: var(--color-primary-500);
    border-inline-start: 1px solid var(--color-stroke-1);
    background-image: linear-gradient(140deg,
            color-mix(in srgb, var(--color-primary-500) 16%, transparent),
            color-mix(in srgb, var(--color-primary-500) 4%, transparent));
}

.dark .tp-split>div:last-child {
    border-inline-start-color: var(--color-stroke-6);
}

/* The canvas area of the editor mock, plus its vertical tool rail. */
.tp-canvas {
    display: grid;
    place-items: center;
    height: 132px;
    border-radius: 12px;
    color: color-mix(in srgb, var(--color-secondary) 38%, transparent);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--color-primary-500) 12%, transparent),
            color-mix(in srgb, var(--color-primary-500) 3%, transparent)),
        var(--color-background-2);
}

/* The gradient is translucent, so the solid colour under it has to swap too -
   without this the canvas stays a near-white block on a dark page. Caught on
   the live page, not in the local light-mode preview. */
.dark .tp-canvas {
    color: color-mix(in srgb, var(--color-accent) 38%, transparent);
    background:
        linear-gradient(140deg,
            color-mix(in srgb, var(--color-primary-500) 22%, transparent),
            color-mix(in srgb, var(--color-primary-500) 6%, transparent)),
        var(--color-background-7);
}

.tp-rail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 10px;
    background-color: var(--color-background-2);
}

.dark .tp-rail {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-7);
}

.tp-rail span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    color: var(--color-primary-500);
    background-color: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
}

.tp-rail svg {
    width: 14px;
    height: 14px;
}

/* Placeholder video thumbnails in the studio mock. */
.tp-thumb {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    color: color-mix(in srgb, var(--color-primary-500) 75%, transparent);
    background-image: linear-gradient(140deg,
            color-mix(in srgb, var(--color-primary-500) 18%, transparent),
            color-mix(in srgb, var(--color-primary-500) 5%, transparent));
}

.tp-thumb svg {
    width: 16px;
    height: 16px;
}

/* The build stops at items-center/start/end; the group headings on /tools
   line the label and its note up on the same baseline. */
.items-baseline {
    align-items: baseline;
}

/* -------------------------------------------------- latin digits -------- */

/*
 * The theme's `dana` font maps ASCII digits to Persian glyphs in its own
 * cmap, so a Latin product name comes out wrong: "Minimax Music01" renders
 * as "Minimax Music۰۱", "TTS 1 HD" as "TTS ۱ HD", "MP3" as "MP۳". Verified
 * on the live page - neither lang="en" nor `font-feature-settings: "locl"
 * off` changes it, because it is the font's own character map, not an
 * OpenType feature. Only a different font for those code points fixes it.
 *
 * So: a face that covers U+0030-0039 and nothing else, made of fonts every
 * platform already has. ASCII digits come from it; every other character,
 * Persian included, still comes from dana. Persian numerals typed as ۰-۹
 * (U+06F0-06F9) are outside the range and are untouched - the body copy on
 * these pages uses those deliberately and keeps looking Persian.
 *
 * If no local font resolves, the face simply does not apply and digits fall
 * back to dana, which is exactly today's behaviour. No regression.
 */
@font-face {
    font-family: "tp-latin-digits";
    src:
        local("Segoe UI"),
        local("Roboto"),
        local("Helvetica Neue"),
        local("Helvetica"),
        local("Arial"),
        local("Liberation Sans"),
        local("DejaVu Sans");
    unicode-range: U+0030-0039;
    font-display: swap;
}

/* Every section on a tool page carries one of these, and font-family
   inherits, so this reaches all of the page's own text without touching the
   header, footer or anything else the theme owns. `dana` mirrors the theme's
   stack; if the theme's font changes, change it here too. */
.tp-hero,
.tp-section,
.tp-rule,
.tp-bg-1,
.tp-bg-2,
.tp-bg-3 {
    font-family: "tp-latin-digits", dana, sans-serif;
}

/* ------------------------------------------------ blog tools CTA -------- */

/*
 * The box that closes each blog post. Deliberately quiet: a border and a
 * tint, no filled panel and no loud button. It sits after the article body,
 * where a reader who already got their answer might want somewhere to go
 * next - so it has to read as a suggestion, not an interruption.
 */
.tp-blogcta {
    max-width: 950px;
    margin: 56px auto 0;
    padding: 24px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 20px;
    background-color: color-mix(in srgb, var(--color-primary-500) 4%, var(--color-background-1));
}

.dark .tp-blogcta {
    border-color: var(--color-stroke-6);
    background-color: color-mix(in srgb, var(--color-primary-500) 8%, var(--color-background-5));
}

.tp-blogcta-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-block-end: 18px;
}

.tp-blogcta-list {
    display: grid;
    gap: 10px;
    margin-block-end: 18px;
}

@media (min-width: 768px) {
    .tp-blogcta {
        padding: 28px;
    }

    .tp-blogcta-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tp-blogcta-list a {
    display: block;
    height: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color-stroke-1);
    border-radius: 14px;
    cursor: pointer;
    background-color: var(--color-background-1);
    transition: border-color 200ms ease;
}

.dark .tp-blogcta-list a {
    border-color: var(--color-stroke-6);
    background-color: var(--color-background-5);
}

.tp-blogcta-list a:hover {
    border-color: color-mix(in srgb, var(--color-primary-500) 45%, transparent);
}

.tp-blogcta-list a .tp-strong {
    display: block;
    margin-block-end: 4px;
    font-weight: 500;
    font-size: 14px;
}

.tp-blogcta-list a .tp-muted {
    display: block;
    font-size: 12.5px;
    line-height: 1.8;
}

/* A link, not a button. The wording is "see the tools" and the styling has
   to agree with it - a filled primary button here would read as a hard sell
   on a page someone opened to fix an error. */
.tp-blogcta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--color-primary-500);
}

.tp-blogcta-link svg {
    transition: transform 200ms ease;
}

.tp-blogcta-link:hover svg {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {

    .tp-blogcta-list a,
    .tp-blogcta-link svg {
        transition: none;
    }

    .tp-blogcta-link:hover svg {
        transform: none;
    }
}