/* ============================================================
   Accessibility Overrides
   Applied via data-* attributes on <html>, set by:
   - themeUtils.applyAccessibility() (wwwroot/js/interop.js) — live toggle
   - the FOUC-prevention init script in Components/App.razor — first paint

   KATMANSIZ (@layer YOK) — VE ÖYLE KALMALI.

   CSS cascade'inde katmansız bildirimler her katmanlı bildirimi ezer; özgüllük ve kaynak
   sırasından bağımsız olarak. Bu dosyanın işi tam olarak budur: kullanıcı yüksek kontrast
   veya hareket azaltma seçtiğinde tercih, hangi utility ne derse desin kazanmak zorundadır.
   Dosya `@layer`'a alınırsa app.css'in `@layer utilities` katmanı onu yener ve erişilebilirlik
   tercihleri SESSİZCE çalışmaz — hata vermez, sadece hiçbir şey olmaz.

   Bu, "wwwroot/css altındaki dosyalar katmanlanmalı" temizliğinin MEŞRU İSTİSNASIDIR.
   Aynı gerekçe animations.css ve theme-overhaul.css için de geçerlidir (ikisi de app.css'ten
   sonra yüklenip değişken/animasyon ezmek üzere tasarlandı).

   Karşılığında bir sınır var: bu dosya GENİŞ seçici (element seçici, çıplak `*`) kullanamaz.
   Buradaki `*` kuralları yalnız opt-in kapsayıcı altındadır (`[data-contrast="high"] *`,
   `[data-motion="reduce"] *`, `@media (prefers-reduced-motion)`) — yani kullanıcı istemeden
   hiçbir utility ezilmez. Çıplak bir `*` veya `h1..h6` kuralı eklenirse proje genelindeki
   Tailwind utility'leri ölür; blazor-shell.css'te tam olarak bu yaşandı.
   Bekçi: RateTheWork.Tests/Unit/Blazor/Styles/UnlayeredStylesheetScopeTests.cs
   ============================================================ */

/* ---- Font Size (data-font-size="small|large|xlarge", "medium" = default/no attribute) ---- */
:root[data-font-size="small"] {
    font-size: 87.5%;
}

:root[data-font-size="large"] {
    font-size: 112.5%;
}

:root[data-font-size="xlarge"] {
    font-size: 125%;
}

/* ---- High Contrast (data-contrast="high") ----
   Overrides both the RGB-triplet tokens Tailwind consumes (tailwind-input.css
   `@theme inline` maps background/foreground/border/muted/card etc. to
   --ds-rgb-*) and the hex tokens
   consumed directly via var() in glass.css/theme-overhaul.css — both must be set or
   utility classes silently keep the low-contrast palette (class-toggle-without-CSS trap). */
:root[data-contrast="high"]:not(.dark) {
    --ds-rgb-text-primary: 0 0 0;
    --ds-rgb-text-secondary: 0 0 0;
    --ds-rgb-text-muted: 38 38 38;
    --ds-rgb-bg-primary: 255 255 255;
    --ds-rgb-bg-secondary: 255 255 255;
    --ds-rgb-bg-elevated: 255 255 255;
    --ds-rgb-border: 0 0 0;

    --ds-text-primary: #000000;
    --ds-text-secondary: #000000;
    --ds-text-muted: #262626;
    --ds-bg-primary: #ffffff;
    --ds-bg-secondary: #ffffff;
    --ds-bg-elevated: #ffffff;
    --ds-border: #000000;
    --ds-border-subtle: #000000;
    --ds-border-strong: #000000;
    --ds-glass-bg: rgba(255, 255, 255, 0.98);
    --ds-glass-border: rgba(0, 0, 0, 0.8);
}

:root.dark[data-contrast="high"] {
    --ds-rgb-text-primary: 255 255 255;
    --ds-rgb-text-secondary: 255 255 255;
    --ds-rgb-text-muted: 217 217 217;
    --ds-rgb-bg-primary: 0 0 0;
    --ds-rgb-bg-secondary: 0 0 0;
    --ds-rgb-bg-elevated: 0 0 0;
    --ds-rgb-border: 255 255 255;

    --ds-text-primary: #ffffff;
    --ds-text-secondary: #ffffff;
    --ds-text-muted: #d9d9d9;
    --ds-bg-primary: #000000;
    --ds-bg-secondary: #000000;
    --ds-bg-elevated: #000000;
    --ds-border: #ffffff;
    --ds-border-subtle: #ffffff;
    --ds-border-strong: #ffffff;
    --ds-glass-bg: rgba(0, 0, 0, 0.98);
    --ds-glass-border: rgba(255, 255, 255, 0.8);
}

/* Every visible border becomes explicit under high contrast, even where the component
   relies on a subtle/near-invisible default border. */
:root[data-contrast="high"] * {
    border-color: currentColor;
}

:root[data-contrast="high"] a,
:root[data-contrast="high"] button {
    text-decoration: underline;
}

/* ---- Reduce Motion (data-motion="reduce") ---- */
:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* OS-level "reduce motion" preference — applies even without an explicit account toggle. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Screen Reader Hints (data-a11y-hints="on") ----
   Extra sr-only-style hints on critical actions are hidden by default and only
   rendered into the accessibility tree (visually-hidden) when this preference is on,
   to avoid duplicate announcements for users who did not opt in. */
:root:not([data-a11y-hints="on"]) .a11y-hint {
    display: none;
}

:root[data-a11y-hints="on"] .a11y-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Dokunma hedefi: eylem satırları (.tap-row) ----
   Satırdaki her düğme ve bağlantı en az 44×44 px dokunma hedefi sunar; mobil istemci aynı
   alt sınırı (44 pt) uygular. Kart eylem çubukları ve yorum dizisinin beğen/yanıtla/sil
   satırları ölçüldüğünde 16–28 px genişlik, 16–20 px yükseklik veriyordu.

   Kutu gerçekten büyür, yalnız tıklama alanı değil: dar komşu düğmelerde (16 ve 28 px)
   genişletilmiş ::after alanları üst üste biner ve sonraki düğme öncekinin hedefini daraltır.
   Görünür satır yüksekliği değişmez: dikey taşma negatif margin ile geri alınır
   ((44 - 20) / 2 = 12). Kapsam opt-in sınıftır; satıra eklenen yeni düğme kendiliğinden kapsanır.
   Bekçi: RateTheWork.Tests/E2E/Flows/TouchTargetE2ETests.cs */
.tap-row > :is(button, a) {
    min-width: 44px;
    min-height: 44px;
    margin-block: -12px;
    justify-content: center;
}