/**
 * Easy Master Tools — shared styles.
 *
 * Scoped under .em-tools / .em-tool so nothing here can reach the theme. The
 * theme ships Tailwind's Preflight, which resets svg to display:block; any
 * inline icon added here has to say otherwise or it drops onto its own line.
 */

/*
 * Colours come from custom properties with a light default, redefined when
 * the page is dark. The theme here is dark, and a card hardcoded to #fff
 * turned into a white rectangle on a near-black page — visible in a
 * screenshot, invisible in the markup.
 */
.em-tools,
.em-tool {
    --em-line: #e5e7eb;
    --em-ink: #111827;
    --em-soft: #6b7280;
    --em-brand: #2563eb;
    --em-surface: #ffffff;
    --em-tint: #f0f6ff;
}

@media (prefers-color-scheme: dark) {
    .em-tools,
    .em-tool {
        --em-line: rgba(255, 255, 255, .14);
        --em-ink: #e8edf5;
        --em-soft: #94a3b8;
        --em-brand: #60a5fa;
        --em-surface: rgba(255, 255, 255, .04);
        --em-tint: rgba(96, 165, 250, .10);
    }
}

/* The theme sets its own dark flag; follow that too. */
[data-theme="dark"] .em-tools,
[data-theme="dark"] .em-tool,
.dark .em-tools,
.dark .em-tool {
    --em-line: rgba(255, 255, 255, .14);
    --em-ink: #e8edf5;
    --em-soft: #94a3b8;
    --em-brand: #60a5fa;
    --em-surface: rgba(255, 255, 255, .04);
    --em-tint: rgba(96, 165, 250, .10);
}

.em-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    flex: none;
}

.em-tools-privacy {
    display: flex;
    align-items: flex-start;
    gap: .6em;
    padding: .9em 1.1em;
    margin: 0 0 1.75em;
    background: var(--em-tint);
    border-left: 3px solid var(--em-brand);
    border-radius: 6px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--em-ink);
}

.em-tools-privacy__icon { margin-top: .25em; color: var(--em-brand); font-size: 1.05em; }

.em-tools-group {
    margin: 2em 0 .85em;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--em-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.em-tools-grid {
    display: grid;
    /*
     * The max stays 1fr on purpose. A definite max — minmax(260px, 420px) —
     * makes the browser count tracks from 420 rather than 260, which turned
     * a four-column row into two. The card is capped instead, below.
     */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.em-tool-card {
    max-width: 460px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 16px;
    border: 1px solid var(--em-line);
    border-radius: 10px;
    background: var(--em-surface);
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

/*
 * The whole card is a link, and the theme underlines links inside content.
 * Its rule is a class plus an element, so matching that is not enough —
 * these carry one more class than the theme's do.
 */
.em-tools a.em-tool-card,
.em-tools a.em-tool-card:hover,
.em-tools a.em-tool-card:focus,
.em-tools a.em-tool-card > * { text-decoration: none; }

.em-tool-card:hover,
.em-tool-card:focus-visible {
    border-color: var(--em-brand);
    transform: translateY(-1px);
}

.em-tool-card__icon {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: var(--em-tint);
    color: var(--em-brand);
    font-size: 20px;
}

.em-tool-card__title { font-weight: 600; color: var(--em-ink); line-height: 1.35; }

/*
 * The weight is set rather than inherited. The theme makes text inside a
 * link bold, so the summary came out at 600 — the same as the title above
 * it, which left the card with no hierarchy at all and every word shouting.
 */
.em-tool-card__summary {
    grid-column: 2;
    margin-top: 2px;
    font-size: .88rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--em-soft);
}

@media (prefers-reduced-motion: reduce) {
    .em-tool-card { transition: none; }
    .em-tool-card:hover { transform: none; }
}

/* ── The shell every tool renders into ──────────────────────────────────── */
.em-tool__drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
    padding: 2.5em 1.25em;
    border: 2px dashed var(--em-line);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.em-tool__drop.is-over { border-color: var(--em-brand); background: #f0f6ff; }
.em-tool__drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.em-tool__hint { font-size: .9rem; color: var(--em-soft); }

.em-tool__error {
    padding: .8em 1em;
    margin: 1em 0 0;
    background: #fef2f2;
    border-left: 3px solid #dc2626;
    border-radius: 6px;
    font-size: .92rem;
    color: #7f1d1d;
}

.em-tool__busy { font-size: .92rem; color: var(--em-soft); }

@media (max-width: 600px) {
    .em-tools-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ── A tool's own page ──────────────────────────────────────────────────── */

/*
 * The sidebar is gone from these pages, which leaves the column as wide as
 * the window. That suits neither half: a drop zone stretched to 1200px looks
 * like a mistake, and prose that wide is hard to read. Both get a measure.
 */
.single-em_tool .em-post-content {
    max-width: 860px;
    margin-inline: auto;
}

.em-tool {
    margin-bottom: 2.25em;
}