/**
 * GoSeedUp Polish Layer — chống "AI slop" + typography/motion discipline.
 *
 * Áp dụng các quy tắc taste-design phổ biến:
 *   1. tabular-nums cho mọi số liệu (alignment ổn định)
 *   2. Animation timing chuẩn: 150-250ms, ease-out cho enter, ease-in-out cho movement
 *   3. Hit target ≥ 44px (mobile)
 *   4. Letter-spacing trên uppercase labels
 *   5. Max line-length 65ch cho body text
 *   6. will-change: transform cho hover-animated cards (chống jank)
 *   7. transform-origin chuẩn cho popover (chống misalignment)
 *   8. Bỏ default focus ring brown, dùng primary ring
 *   9. Scale animation start từ 0.96, không phải 0 (mimic real-world objects)
 *  10. Bỏ "AI smell" patterns: gradient text, side-stripe, washed-out grays
 *
 * Load sau themes.css để override sạch.
 */

/* ─── 1. Tabular nums cho số liệu ───────────────────────────────────── */
.lb-karma .num,
.thread-vote .count,
.talk-vote .count,
.reply-vote .count,
.upvote-btn .count,
.upvote-big .count,
.stat .value,
.persona-budget,
.featured-item span,
.feed-card .body strong,
.c-item .upvote .num,
.exp-stat-pill strong,
.col-card .col-meta,
.jb-meta strong,
[data-numeric] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ─── 2. Animation timing chuẩn ─────────────────────────────────────── */
:root {
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);    /* enter/exit */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* movement on-screen */
    --ease-snap:   cubic-bezier(0.32, 0.72, 0, 1);   /* iOS spring */
    --dur-micro:   150ms;
    --dur-std:     200ms;
    --dur-modal:   250ms;
}

/* Mọi .btn / link / interactive element dùng ease-out + micro duration */
.btn, .upvote-btn, .upvote-big, .thread-card, .lf-card, .lb-row,
.c-item, .col-card, .jb-card, .post-card, .lp-side-card,
.persona, .feed-card, .upd-card, .featured-item, .lp-cat-chip {
    transition-duration: var(--dur-std) !important;
    transition-timing-function: var(--ease-out) !important;
}

/* ─── 3. Hit target ≥ 44px ───────────────────────────────────────────── */
@media (max-width: 720px) {
    .btn { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
    .lp-cat-chip { min-height: 36px; padding: 7px 14px; }
    .talks-tab { min-height: 38px; padding: 9px 16px; }
    .jb-filter, .lf-filter { min-height: 36px; padding: 7px 14px; }
}

/* ─── 4. Uppercase labels letter-spacing ────────────────────────────── */
.section-eyebrow,
[style*="text-transform:uppercase"],
[style*="text-transform: uppercase"] {
    letter-spacing: 0.06em;
}

/* ─── 5. Body text line-length cap ──────────────────────────────────── */
.lp-description,
.upd-body,
.talk-body,
.reply .body,
.c-hero p,
.lb-hero p,
.feed-card .body {
    max-width: 68ch;
}

/* ─── 6. will-change: transform cho hover-animated cards ────────────── */
.post-card,
.thread-card,
.lb-row,
.lf-card,
.c-item,
.col-card,
.jb-card,
.upd-card,
.persona,
.feed-card,
.talks-tab,
.lp-cat-chip {
    will-change: transform;
}

/* Chỉ active will-change khi hover để giảm overhead khi idle */
.post-card:not(:hover),
.thread-card:not(:hover),
.lb-row:not(:hover) {
    will-change: auto;
}

/* ─── 7. Focus ring đồng nhất (primary thay vì brown default) ───────── */
*:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.28);
    border-radius: inherit;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.18);
}

/* ─── 8. Scale animation start từ 0.96 (real-world feel) ────────────── */
@keyframes pop-in {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
@keyframes fade-slide-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
[data-anim="pop-in"]      { animation: pop-in var(--dur-std) var(--ease-out); }
[data-anim="fade-slide"]  { animation: fade-slide-up var(--dur-modal) var(--ease-out); }

/* ─── 9. Popover transform-origin (chống misalignment khi animate scale) */
details[open] > [role="menu"],
.menu-popover,
[data-popover] {
    transform-origin: top left;
}
[data-popover="right"] { transform-origin: top right; }

/* ─── 10. Chống jank: hover transform chỉ trên child, không parent ──── */
.thread-card:hover .thread-body,
.post-card:hover .post-body { transform: none; }  /* parent đã transform */

/* ─── 11. Bỏ "AI smell" patterns ────────────────────────────────────── */
/* Cấm gradient-text (đánh dấu là decorative-only, gây mờ + không accessible) */
.no-gradient-text {
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    color: var(--text-primary);
}

/* ─── 12. Skeleton loading state (chuẩn shimmer ngắn) ───────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--border-soft) 0%, var(--bg) 50%, var(--border-soft) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: 6px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* ─── 13. Image rendering cải thiện (avatar / logo small) ────────────── */
img[width="32"], img[width="38"], img[width="44"], img[width="48"],
.lb-avatar, .ft-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ─── 14. Disabled state nhất quán ──────────────────────────────────── */
[disabled],
.is-disabled,
.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── 15. Selection color brand ─────────────────────────────────────── */
::selection {
    background: rgba(255, 107, 53, 0.25);
    color: var(--text-primary);
}

/* ─── 16. Scrollbar Apple-style (nhẹ + autohide cảm giác native) ───── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); background-clip: padding-box; }

/* ─── 17. Form label đậm hơn (tăng hierarchy) ───────────────────────── */
.form-group label,
label[for] {
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── 18. Stat numbers giant emphasis ───────────────────────────────── */
.lb-karma .num,
.stat .value,
.exp-stat-pill strong {
    font-feature-settings: "tnum" 1, "ss01" 1;
    letter-spacing: -0.02em;
}

/* ─── 19. prefers-reduced-motion respect (a11y) ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001s !important;
        scroll-behavior: auto !important;
    }
}

/* ─── 20. Spacing scale tokens (bội số 4) ───────────────────────────── */
:root {
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
}

/* ─── 21. Skip-link cho keyboard nav (a11y WCAG AA) ─────────────────── */
.skip-link {
    position: absolute; left: -9999px; top: 8px; z-index: 10000;
    padding: 10px 18px; background: var(--primary); color: #FFFFFF;
    border-radius: 6px; font-weight: 600;
}
.skip-link:focus { left: 8px; }

/* ─── 22. Screen-reader only ────────────────────────────────────────── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── 23. Image responsive default ─────────────────────────────────── */
img { max-width: 100%; height: auto; }

/* ─── 24. touch-action: manipulation cho mọi button (loại 300ms delay iOS) */
.btn, button, [role="button"], a.btn, .upvote-btn, .upvote-big {
    touch-action: manipulation;
}

/* ─── 25. Cursor pointer cho clickable element (web a11y) ──────────── */
button, [role="button"], .btn, summary[role="button"], summary, label[for] {
    cursor: pointer;
}

/* ─── 26. Press scale feedback (subtle 0.97 - Pro Max guideline) ──── */
.btn:active, .upvote-btn:active, .upvote-big:active,
.persona:active, .thread-card:active, .lf-card:active {
    transform: scale(0.97);
    transition-duration: 80ms !important;
}

/* ─── 27. Modal scrim opacity chuẩn 50% (Pro Max guideline) ────────── */
.modal-overlay,
[data-modal-scrim],
.lightbox-overlay {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(2px);
}

/* ─── 28. Disabled opacity standard 0.45 (giữa 0.38-0.5 range) ─────── */
button[disabled], .btn[disabled], input[disabled], textarea[disabled],
select[disabled], [aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── 29. KHÔNG dùng layout-shifting properties cho animation ──────── */
/* Comment-only rule cho dev. CSS không enforce được, nhưng polish.css
   không có rule nào animate width/height/top/left. */

/* ─── 30. Icon stroke consistency (Lucide rendering) ───────────────── */
.lucide,
[data-lucide] {
    stroke-width: 1.75;  /* giữa 1.5 - 2 Pro Max guideline */
}

/* ─── 31. Loading state - skeleton shimmer chuẩn ───────────────────── */
.is-loading { color: transparent !important; user-select: none; pointer-events: none; }
.is-loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: inherit;
}

/* ─── 32. tabular figures + ss01 cho data display (ép Pro Max rule) ─ */
table td, table th,
.price, .amount, .count, .num,
[data-numeric],
time { font-variant-numeric: tabular-nums; }