/* ────────────────────────────────────────────────────────────────
   ARABIC TOOLS — SHELL

   PALETTE — a soft sibling of Araboo's: same rounded, friendly,
   low-saturation feel, but the teal family is gone. Ink is a warm
   indigo-charcoal, the primary is a soft indigo, and the warm anchor
   is apricot rather than coral. Surfaces are paper and pale lilac,
   never white-on-white.

   Everything is scoped under .at-* and the tokens are prefixed
   --at-* so Astra, Elementor and PMPro can't collide with them.
   Visual properties that themes habitually hijack (background,
   color, text-transform, list-style, ::marker) carry !important.
   ──────────────────────────────────────────────────────────────── */

:root {
    /* ── Ink ─────────────────────────────────────── */
    --at-ink-deep:   #2E2B3F;   /* headings */
    --at-ink:        #4A4661;   /* body */
    --at-ink-soft:   #6E698A;   /* secondary */
    --at-ink-muted:  #9E9AB4;   /* tertiary, placeholders */

    /* ── Primary (soft indigo) ───────────────────── */
    --at-primary:      #6F63C9;
    --at-primary-deep: #5A4FB0;
    --at-primary-soft: #A79FE3;
    --at-primary-tint: #EFEDFC;

    /* ── Warm accent (apricot) ───────────────────── */
    --at-accent:      #E8926A;
    --at-accent-deep: #CE7049;
    --at-accent-tint: #FDF0E8;

    /* ── Semantic ────────────────────────────────── */
    --at-gold:   #EFC169;
    --at-green:  #5FAE87;
    --at-rose:   #D97A8E;
    --at-danger: #C05656;

    /* ── Surfaces ────────────────────────────────── */
    --at-surface:      #FFFFFF;
    --at-paper:        #FBF9F6;   /* warm page ground */
    --at-lilac:        #F5F3FC;   /* section zoning */
    --at-line:         #E9E5F1;   /* hairline */
    --at-line-strong:  #D6D0E4;

    /* ── Shape + motion ──────────────────────────── */
    --at-radius-sm:  10px;
    --at-radius:     16px;
    --at-radius-lg:  24px;
    --at-radius-pill: 999px;

    --at-shadow-xs: 0 1px 2px rgba(46, 43, 63, .05);
    --at-shadow-sm: 0 2px 8px rgba(46, 43, 63, .07);
    --at-shadow-md: 0 8px 24px rgba(46, 43, 63, .09);
    --at-shadow-lg: 0 18px 46px rgba(46, 43, 63, .13);

    --at-ease: cubic-bezier(.22, .61, .36, 1);

    /* ── Type ────────────────────────────────────── */
    --at-font:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --at-font-ar: 'Noto Sans Arabic', 'Inter', system-ui, sans-serif;
}

/* ═══════════════════════════════════════════════════
   PRIMITIVES
   ═══════════════════════════════════════════════════ */

.at-tool, .at-directory, .at-page {
    font-family: var(--at-font);
    color: var(--at-ink) !important;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

.at-tool *, .at-directory *, .at-page * { box-sizing: border-box; }

.at-tool h1, .at-tool h2, .at-tool h3,
.at-directory h1, .at-directory h2, .at-directory h3,
.at-page h1, .at-page h2, .at-page h3 {
    color: var(--at-ink-deep) !important;
    font-family: var(--at-font);
    font-weight: 700;
    letter-spacing: -.012em;
    text-transform: none !important;
    margin: 0;
}

.at-rtl, .at-input--ar { font-family: var(--at-font-ar) !important; }

/* Buttons ─────────────────────────────────────────── */
.at-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: var(--at-radius-pill);
    font: 600 15px/1 var(--at-font);
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s var(--at-ease), background .18s var(--at-ease), box-shadow .18s var(--at-ease);
    white-space: nowrap;
}
.at-btn i { font-size: 17px; }
.at-btn:hover  { transform: translateY(-1px); }
.at-btn:active { transform: translateY(0); }
.at-btn:focus-visible { outline: 3px solid var(--at-primary-soft); outline-offset: 2px; }
.at-btn[disabled], .at-btn.is-busy { opacity: .6; cursor: not-allowed; transform: none !important; }

.at-btn--primary {
    background: var(--at-primary) !important;
    color: #FFFFFF !important;
    box-shadow: var(--at-shadow-sm);
}
.at-btn--primary:hover { background: var(--at-primary-deep) !important; box-shadow: var(--at-shadow-md); }

.at-btn--ghost {
    background: var(--at-surface) !important;
    color: var(--at-ink) !important;
    border-color: var(--at-line-strong);
}
.at-btn--ghost:hover { background: var(--at-lilac) !important; }

.at-btn--tiny {
    padding: 7px 13px;
    font-size: 13px;
    background: var(--at-surface) !important;
    color: var(--at-ink-soft) !important;
    border-color: var(--at-line);
}
.at-btn--tiny i { font-size: 14px; }
.at-btn--tiny:hover { background: var(--at-lilac) !important; color: var(--at-ink) !important; }
.at-btn--tiny.is-done { color: var(--at-green) !important; border-color: var(--at-green); }

/* Badges ──────────────────────────────────────────── */
.at-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--at-radius-pill);
    font: 600 12px/1.5 var(--at-font);
    text-transform: none !important;
    letter-spacing: .01em;
    white-space: nowrap;
}
.at-badge i { font-size: 12px; }
.at-badge--free    { background: #E9F5EF !important; color: #3C7D60 !important; }
.at-badge--account { background: var(--at-lilac) !important; color: var(--at-primary-deep) !important; }
.at-badge--paid    { background: var(--at-accent-tint) !important; color: var(--at-accent-deep) !important; }
.at-badge--ai      { background: var(--at-primary-tint) !important; color: var(--at-primary-deep) !important; }
.at-badge--instant { background: #FDF6E4 !important; color: #98701C !important; }
.at-badge--draft   { background: #F4F1F7 !important; color: var(--at-ink-soft) !important; }

/* ═══════════════════════════════════════════════════
   TOOL PANEL
   ═══════════════════════════════════════════════════ */

.at-tool {
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-sm);
    padding: 28px;
    max-width: 860px;
    margin: 0 auto;
}

.at-tool__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--at-line);
}
.at-tool__mark {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--at-radius);
    background: var(--at-primary-tint) !important;
    color: var(--at-primary-deep) !important;
}
.at-tool__mark i { font-size: 27px; }
.at-tool__headtext { flex: 1 1 auto; min-width: 0; }
.at-tool__title    { font-size: clamp(20px, 2.4vw, 26px); }
.at-tool__tagline  { margin: 5px 0 0; color: var(--at-ink-soft) !important; font-size: 15px; }

/* Meter ───────────────────────────────────────────── */
.at-meter {
    background: var(--at-lilac) !important;
    border-radius: var(--at-radius);
    padding: 13px 17px;
    margin-bottom: 22px;
}
.at-meter__bar {
    height: 6px;
    border-radius: var(--at-radius-pill);
    background: #E4DFF2 !important;
    overflow: hidden;
    margin-bottom: 9px;
}
.at-meter__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--at-primary) !important;
    transition: width .4s var(--at-ease);
}
.at-meter__text {
    margin: 0;
    font-size: 13.5px;
    color: var(--at-ink-soft) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.at-meter__text strong { color: var(--at-ink-deep) !important; font-weight: 700; }
.at-meter__link {
    margin-left: auto;
    color: var(--at-primary-deep) !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px solid var(--at-primary-soft);
}
.at-meter__link:hover { border-bottom-color: var(--at-primary-deep); }

.at-meter--low .at-meter__bar span { background: var(--at-accent) !important; }
.at-meter--low .at-meter__link     { color: var(--at-accent-deep) !important; border-bottom-color: var(--at-accent); }

.at-meter--unlimited {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--at-primary-deep) !important;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   FORM
   ═══════════════════════════════════════════════════ */

.at-field { margin-bottom: 20px; }

.at-field__label {
    display: block;
    margin-bottom: 7px;
    font: 600 14px/1.4 var(--at-font);
    color: var(--at-ink-deep) !important;
    text-transform: none !important;
}
.at-req { color: var(--at-accent-deep) !important; margin-left: 3px; }

.at-input,
.at-tool select.at-input,
.at-tool textarea.at-input {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid var(--at-line-strong);
    border-radius: var(--at-radius);
    background: var(--at-paper) !important;
    color: var(--at-ink-deep) !important;
    font: 400 15.5px/1.65 var(--at-font);
    transition: border-color .18s var(--at-ease), box-shadow .18s var(--at-ease), background .18s var(--at-ease);
}
.at-input:focus {
    outline: none;
    border-color: var(--at-primary-soft);
    background: var(--at-surface) !important;
    box-shadow: 0 0 0 4px var(--at-primary-tint);
}
.at-input::placeholder { color: var(--at-ink-muted) !important; }
.at-input--ar { font-size: 18px; line-height: 2; }

.at-tool select.at-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E698A' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
    padding-right: 42px;
}

.at-field__help  { margin: 6px 0 0; font-size: 13px; color: var(--at-ink-soft) !important; }
.at-field__count { margin: 6px 0 0; font-size: 12px; color: var(--at-ink-muted) !important; text-align: right; }
.at-field__count.is-near { color: var(--at-accent-deep) !important; font-weight: 600; }

.at-radios { display: flex; flex-wrap: wrap; gap: 9px; }
.at-radio {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1.5px solid var(--at-line-strong);
    border-radius: var(--at-radius-pill);
    background: var(--at-surface) !important;
    font-size: 14px;
    cursor: pointer;
    transition: all .18s var(--at-ease);
}
.at-radio:hover { border-color: var(--at-primary-soft); }
.at-radio input { accent-color: var(--at-primary); margin: 0; }
.at-radio:has(input:checked) {
    border-color: var(--at-primary);
    background: var(--at-primary-tint) !important;
    color: var(--at-primary-deep) !important;
    font-weight: 600;
}

/* Image field ─────────────────────────────────────── */
.at-drop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border: 2px dashed var(--at-line-strong);
    border-radius: var(--at-radius);
    background: var(--at-paper) !important;
    transition: border-color .18s var(--at-ease), background .18s var(--at-ease);
}
.at-drop.is-over {
    border-color: var(--at-primary);
    background: var(--at-primary-tint) !important;
}
.at-drop__hint { font-size: 13px; color: var(--at-ink-soft) !important; }
.at-drop__preview {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--at-line);
}
.at-drop__preview img {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: var(--at-radius-sm);
    border: 1px solid var(--at-line-strong);
}
.at-drop__preview span {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--at-ink-soft) !important;
    word-break: break-all;
}

.at-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
}
.at-cost {
    margin-left: auto;
    font-size: 13px;
    color: var(--at-ink-muted) !important;
}

/* ═══════════════════════════════════════════════════
   OUTPUT
   ═══════════════════════════════════════════════════ */

.at-output {
    margin-top: 26px;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    overflow: hidden;
    animation: at-rise .35s var(--at-ease);
}
@keyframes at-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.at-output__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 17px;
    background: var(--at-lilac) !important;
    border-bottom: 1px solid var(--at-line);
}
.at-output__title { font-size: 14.5px; font-weight: 700; }
.at-output__tools { margin-left: auto; display: flex; gap: 7px; }

.at-output__body {
    padding: 22px;
    background: var(--at-surface) !important;
    font-size: 16px;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 60px;
}
.at-output__body.at-rtl { font-size: 19px; line-height: 2.1; text-align: right; }
.at-output__body h1, .at-output__body h2, .at-output__body h3 { margin: 18px 0 8px; font-size: 17px; }
.at-output__body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.at-output__body th, .at-output__body td {
    border: 1px solid var(--at-line);
    padding: 9px 12px;
    /* start, not inherit: the panel is text-align:right for the Arabic,
       and inherit handed that to every cell including the English ones.
       `start` resolves against the cell's own dir="auto", so an English
       gloss sits left and an Arabic word sits right, in the same row. */
    text-align: start;
}

/* One line, one direction. miniMarkdown() wraps each line of body text
   in this with dir="auto"; without the block display it could not be
   aligned at all, and without text-align:start it would inherit the
   panel's right and put English full stops at the front of the line. */
.at-output__body .at-md-line {
    display: block;
    text-align: start;
}
.at-output__body th { background: var(--at-lilac) !important; font-weight: 600; }
.at-output__body ul, .at-output__body ol { padding-inline-start: 22px; margin: 10px 0; }
.at-output__body li { list-style: inherit !important; margin: 4px 0; }
.at-output__body li::marker { color: var(--at-primary) !important; }

/* Status line + skeleton ──────────────────────────── */
.at-status {
    margin-top: 16px;
    padding: 13px 17px;
    border-radius: var(--at-radius);
    font-size: 14px;
    background: var(--at-paper) !important;
    color: var(--at-ink-soft) !important;
    border: 1px solid var(--at-line);
}
.at-status--error {
    background: #FDF0F0 !important;
    color: #8E3A3A !important;
    border-color: #F0D5D5;
}
.at-status--busy { display: flex; align-items: center; gap: 10px; }
.at-spinner {
    width: 16px; height: 16px;
    border: 2.5px solid var(--at-primary-tint);
    border-top-color: var(--at-primary);
    border-radius: 50%;
    animation: at-spin .7s linear infinite;
    flex: 0 0 auto;
}
@keyframes at-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════
   GATES (the upsell)
   ═══════════════════════════════════════════════════ */

.at-gate {
    text-align: center;
    padding: 40px 26px;
    border-radius: var(--at-radius-lg);
    background: linear-gradient(168deg, var(--at-lilac) 0%, var(--at-paper) 100%) !important;
    border: 1px solid var(--at-line);
}
.at-gate__mark {
    font-size: 46px;
    color: var(--at-primary) !important;
    display: block;
    margin-bottom: 12px;
}
.at-gate h3 { font-size: 21px; margin-bottom: 9px; }
.at-gate p  { margin: 0 auto 22px; max-width: 46ch; color: var(--at-ink-soft) !important; font-size: 15px; }
.at-gate__actions { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; }
.at-gate__note {
    margin-top: 18px !important;
    font-size: 12.5px;
    color: var(--at-ink-muted) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.at-gate--quota .at-gate__mark { color: var(--at-accent) !important; }

.at-gate__alts {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--at-line);
}
.at-gate__alts p { margin-bottom: 11px !important; font-size: 13.5px; font-weight: 600; color: var(--at-ink) !important; }
.at-gate__alts ul {
    list-style: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin: 0; padding: 0;
}
.at-gate__alts li { list-style: none !important; margin: 0; }
.at-gate__alts a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--at-radius-pill);
    background: var(--at-surface) !important;
    border: 1px solid var(--at-line-strong);
    color: var(--at-ink) !important;
    font-size: 13.5px;
    text-decoration: none !important;
}
.at-gate__alts a:hover { border-color: var(--at-primary-soft); color: var(--at-primary-deep) !important; }

/* Upsell modal (raised by the runtime on a 402) ───── */
.at-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(46, 43, 63, .55);
    backdrop-filter: blur(3px);
    animation: at-fade .2s var(--at-ease);
}
@keyframes at-fade { from { opacity: 0; } to { opacity: 1; } }
.at-modal__card {
    background: var(--at-surface) !important;
    border-radius: var(--at-radius-lg);
    box-shadow: var(--at-shadow-lg);
    padding: 38px 32px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    animation: at-rise .28s var(--at-ease);
}
.at-modal__mark { font-size: 46px; color: var(--at-accent) !important; display: block; margin-bottom: 12px; }
.at-modal h3 { font-size: 21px; margin-bottom: 9px; }
.at-modal p  { color: var(--at-ink-soft) !important; margin: 0 0 24px; font-size: 15px; }
.at-modal__actions { display: flex; flex-direction: column; gap: 10px; }
.at-modal__actions .at-btn { justify-content: center; }
.at-modal__close {
    background: none !important;
    border: 0;
    color: var(--at-ink-muted) !important;
    font: 500 13.5px var(--at-font);
    cursor: pointer;
    padding: 6px;
}
.at-modal__close:hover { color: var(--at-ink) !important; }

/* ═══════════════════════════════════════════════════
   DIRECTORY
   ═══════════════════════════════════════════════════ */

.at-directory { max-width: 1180px; margin: 0 auto; }

.at-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-bottom: 34px;
}
.at-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 380px;
    display: flex;
    align-items: center;
}
.at-search i {
    position: absolute;
    left: 15px;
    color: var(--at-ink-muted) !important;
    font-size: 17px;
    pointer-events: none;
}
.at-search input {
    width: 100%;
    padding: 12px 16px 12px 43px;
    border: 1.5px solid var(--at-line-strong);
    border-radius: var(--at-radius-pill);
    background: var(--at-surface) !important;
    color: var(--at-ink-deep) !important;
    font: 400 15px var(--at-font);
}
.at-search input:focus {
    outline: none;
    border-color: var(--at-primary-soft);
    box-shadow: 0 0 0 4px var(--at-primary-tint);
}

.at-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.at-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--at-line-strong);
    border-radius: var(--at-radius-pill);
    background: var(--at-surface) !important;
    color: var(--at-ink-soft) !important;
    font: 500 14px var(--at-font);
    cursor: pointer;
    transition: all .18s var(--at-ease);
}
.at-chip i { font-size: 15px; }
.at-chip:hover { border-color: var(--at-primary-soft); color: var(--at-ink) !important; }
.at-chip.is-active {
    background: var(--at-primary) !important;
    border-color: var(--at-primary);
    color: #FFFFFF !important;
    font-weight: 600;
}

.at-group { margin-bottom: 44px; }
.at-group__title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 18px;
    margin-bottom: 18px;
}
.at-group__title i { font-size: 24px; color: var(--at-primary) !important; }

.at-grid { display: grid; gap: 18px; }
.at-grid--1 { grid-template-columns: 1fr; }
.at-grid--2 { grid-template-columns: repeat(2, 1fr); }
.at-grid--3 { grid-template-columns: repeat(3, 1fr); }
.at-grid--4 { grid-template-columns: repeat(4, 1fr); }

.at-card {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 22px;
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius-lg);
    background: var(--at-surface) !important;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--at-shadow-xs);
    transition: transform .2s var(--at-ease), box-shadow .2s var(--at-ease), border-color .2s var(--at-ease);
}
.at-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--at-shadow-md);
    border-color: var(--at-primary-soft);
}
.at-card__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: var(--at-radius);
    background: var(--at-primary-tint) !important;
    color: var(--at-primary-deep) !important;
}
.at-card__mark i { font-size: 24px; }
.at-card:nth-child(3n+2) .at-card__mark { background: var(--at-accent-tint) !important; color: var(--at-accent-deep) !important; }
.at-card:nth-child(3n)   .at-card__mark { background: #E9F5EF !important; color: #3C7D60 !important; }

.at-card__text  { flex: 1 1 auto; display: block; }
.at-card__title {
    display: block;
    font: 700 16.5px/1.35 var(--at-font);
    color: var(--at-ink-deep) !important;
}
.at-card__ar {
    display: inline-block;
    margin-inline-start: 8px;
    font-family: var(--at-font-ar) !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--at-ink-muted) !important;
}
.at-card__tagline {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    color: var(--at-ink-soft) !important;
    line-height: 1.55;
}
.at-card__foot { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.at-card--locked .at-card__mark { background: var(--at-lilac) !important; color: var(--at-ink-muted) !important; }

.at-empty, .at-noresults {
    text-align: center;
    padding: 34px;
    color: var(--at-ink-soft) !important;
    font-size: 15px;
}

/* ═══════════════════════════════════════════════════
   LANDING PAGE CHROME (templates)
   ═══════════════════════════════════════════════════ */

.at-page { background: var(--at-paper) !important; padding: 44px 22px 66px; }
.at-page__inner { max-width: 1180px; margin: 0 auto; }

.at-hero { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.at-hero h1 { font-size: clamp(28px, 5vw, 42px); line-height: 1.18; margin-bottom: 13px; }
.at-hero p  { font-size: clamp(15px, 2vw, 18px); color: var(--at-ink-soft) !important; margin: 0; }

.at-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    font-size: 13px;
    color: var(--at-ink-muted) !important;
    margin-bottom: 22px;
}
.at-crumbs a { color: var(--at-ink-soft) !important; text-decoration: none !important; }
.at-crumbs a:hover { color: var(--at-primary-deep) !important; }

.at-prose {
    max-width: 720px;
    margin: 48px auto 0;
    font-size: 16px;
    color: var(--at-ink) !important;
}
.at-prose h2 { font-size: 22px; margin: 32px 0 12px; }
.at-prose h3 { font-size: 17px; margin: 24px 0 8px; }
.at-prose p  { margin: 0 0 14px; }
.at-prose ul { padding-inline-start: 22px; margin: 0 0 16px; }
.at-prose li { list-style: disc !important; margin: 6px 0; }
.at-prose li::marker { color: var(--at-primary) !important; }

.at-faq { max-width: 720px; margin: 44px auto 0; }
.at-faq__item {
    border: 1px solid var(--at-line);
    border-radius: var(--at-radius);
    background: var(--at-surface) !important;
    margin-bottom: 11px;
    overflow: hidden;
}
.at-faq__item summary {
    padding: 16px 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--at-ink-deep) !important;
    list-style: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.at-faq__item summary::-webkit-details-marker { display: none; }
.at-faq__item summary::after {
    content: '+';
    font-size: 21px;
    color: var(--at-primary) !important;
    line-height: 1;
    flex: 0 0 auto;
}
.at-faq__item[open] summary::after { content: '−'; }
.at-faq__item p { margin: 0; padding: 0 20px 18px; color: var(--at-ink-soft) !important; font-size: 15px; }

.at-related { max-width: 1180px; margin: 56px auto 0; }
.at-related h2 { font-size: 20px; margin-bottom: 18px; text-align: center; }

.at-cta {
    max-width: 720px;
    margin: 56px auto 0;
    text-align: center;
    padding: 38px 28px;
    border-radius: var(--at-radius-lg);
    background: linear-gradient(155deg, var(--at-primary-tint) 0%, var(--at-accent-tint) 100%) !important;
    border: 1px solid var(--at-line);
}
.at-cta h2 { font-size: 22px; margin-bottom: 9px; }
.at-cta p  { color: var(--at-ink-soft) !important; margin: 0 0 20px; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 980px) {
    .at-grid--3, .at-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .at-grid--2, .at-grid--3, .at-grid--4 { grid-template-columns: 1fr; }
    .at-tool { padding: 20px; border-radius: var(--at-radius); }
    .at-page { padding: 28px 15px 48px; }
    .at-tool__head { gap: 12px; }
    .at-tool__mark { width: 44px; height: 44px; }
    .at-tool__mark i { font-size: 23px; }
    .at-form__actions .at-btn { flex: 1 1 auto; justify-content: center; }
    .at-cost { margin: 4px 0 0; width: 100%; text-align: center; }
    .at-output__tools { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .at-btn, .at-card, .at-output, .at-modal, .at-modal__card, .at-meter__bar span {
        transition: none !important;
        animation: none !important;
    }
}

/* ═════════════════════════════════════════════
   EMBEDDED APPS  (tools registered with 'layout' => 'app')

   A whiteboard or a seating plan is an application, not an article. It
   needs the width of the display, not the width of a reading column —
   but the first cut of these two tools took that width with an inline
   `width:100vw; left:calc(-50vw + 50%)`, and 100vw counts the
   scrollbar. The frame ended up 7px off-centre with 7px clipped off the
   right, inside a rounded 860px card it was visibly bursting out of.

   So: no viewport units anywhere in here. The page column becomes a
   three-track grid — gutter, readable column, gutter — prose sits in
   the middle track and the app spans all three. There is nothing left
   to be off by, and the prose blocks keep their measure for free
   instead of each needing a rule.
   ════════════════════════════════════════════ */

/* Astra caps the content container at 1240px and lays it out as a row.
   Both have to give, or the grid below has nothing to expand into. */
.arabtools-layout-app #content .ast-container {
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.arabtools-layout-app .at-page {
    width: 100%;
    flex: 1 1 100%;
    padding-left: 0;
    padding-right: 0;
}

.arabtools-layout-app .at-page__inner {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr min(1180px, calc(100% - 44px)) 1fr;
}
.arabtools-layout-app .at-page__inner > *              { grid-column: 2; }
.arabtools-layout-app .at-page__inner > .at-tool--app  { grid-column: 1 / -1; }

/* No card around an app: it meets its own edges, and keeps only the
   hairline that separates it from the page above and below. */
.at-tool--app {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

.at-appframe {
    position: relative;
    width: 100%;
    height: 82vh;
    min-height: 560px;
    background: var(--at-paper) !important;
}
@supports (height: 1dvh) {
    .at-appframe { height: 82dvh; }
}
.at-appframe__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Bottom-right, deliberately: every one of these apps puts its own
   controls along the top. */
.at-appframe__full {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--at-line-strong);
    border-radius: 999px;
    background: var(--at-surface) !important;
    color: var(--at-ink-deep) !important;
    font: 600 13.5px/1 var(--at-font);
    cursor: pointer;
    box-shadow: var(--at-shadow-sm);
    opacity: .82;
    transition: opacity .18s var(--at-ease), transform .18s var(--at-ease);
}
.at-appframe__full:hover { opacity: 1; transform: translateY(-1px); }
.at-appframe__full i     { font-size: 15px; }

.at-appframe:fullscreen        { height: 100%; min-height: 0; }
.at-appframe:-webkit-full-screen { height: 100%; min-height: 0; }

@media (max-width: 782px) {
    .at-appframe { height: 74vh; min-height: 460px; }
    @supports (height: 1dvh) { .at-appframe { height: 74dvh; } }
}

/* ═══════════════════════════════════════════
   CATEGORY LISTINGS
   ════════════════════════════════════════════ */

.at-hero__mark {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-bottom: 16px;
    border-radius: var(--at-radius);
    background: var(--at-primary-tint) !important;
    color: var(--at-primary-deep) !important;
}
.at-hero__mark i { font-size: 30px; }

.at-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.at-cats__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid var(--at-line);
    border-radius: 999px;
    background: var(--at-surface) !important;
    color: var(--at-ink-deep) !important;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .18s var(--at-ease), transform .18s var(--at-ease);
}
.at-cats__link:hover  { border-color: var(--at-primary); transform: translateY(-1px); }
.at-cats__link i      { color: var(--at-primary-deep) !important; font-size: 16px; }
.at-cats__link em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--at-ink-soft) !important;
}
/* ═════════════════════════════════════════════
   CONTROLS THE THEME FIGHTS US FOR

   Astra pins `select { height: 40px }`. `.at-input` adds 13px of
   padding top and bottom on top of a ~25px line box — about 51px of
   content in a 40px border-box — so the chosen option is sliced in
   half. It reads as a font bug and is a box-model one.

   This rule already existed in at-runtime.css, whose own comment said
   "affects every browser tool, so it lives in the shared runtime".
   That was the mistake: at-runtime.css is enqueued only for
   `engine: browser` tools, but the AI chassis builds its form with the
   same `.at-input` classes (arabtools_render_field), so every AI tool
   with a select — the verb conjugator's "Which tables?", the text
   leveller, the grammar drill — kept the squashed control. tools.css
   ships with `arabtools-shell` on every tool page, so it belongs here.

   Per the house rule these carry !important: a theme rule is what
   overrode them.
   ════════════════════════════════════════════ */

.at-tool select.at-input,
.at-tool input.at-input,
.at-tool textarea.at-input,
.at-tool select,
.at-form select {
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}

.at-tool select.at-input,
.at-form select.at-input {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}