/* Global styles for ChaiPani.
 *
 * Extracted from inline <style> blocks in base.html and
 * components/_card_styles.html. Inline, this was 26 KB repeated on every
 * page and impossible to cache; as a file it is fetched once, hashed and
 * served immutable. It also pulls the HTML document back under TCP's
 * initial congestion window, so the page arrives in one round trip
 * instead of two — worth ~1 RTT, which on a high-latency link is the
 * single biggest thing the payload can do.
 */

/* ===== base ===== */
/*
        Urdu Nastaliq: Gulzar (SIL OFL, github.com/simoncozens/Gulzar) —
        chosen over Noto Nastaliq Urdu after a side-by-side on real posts:
        deeper calligraphic cascade, better stroke contrast, cleaner outlines
        when zoomed, and it's SMALLER (178 KB subset vs 261 KB). Noto stays
        next in the stack to cover the handful of codepoints Gulzar lacks
        (tatweel, some Quranic marks). License: static/fonts/Gulzar-OFL.txt
    */
        @font-face {
            font-family: 'Gulzar';
            src: url("../fonts/gulzar-urdu.8e1f98a911ff.woff2") format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
            /* Browsers fetch this ONLY when the page actually contains
               Arabic-script text — English-only readers pay 0 bytes. */
            unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200D;
        }

        /* Urdu text styling */
        [lang="ur"], .lang-ur, .rtl-urdu {
            font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif;
            direction: rtl;
            text-align: right;
            line-height: 2.4;
            font-size: 1.1em;
        }

        /* Arabic text styling */
        [lang="ar"], .lang-ar, .rtl-arabic {
            font-family: 'Noto Naskh Arabic', serif;
            direction: rtl;
            text-align: right;
            line-height: 1.8;
        }

        /* Auto-detect text direction for post content */
        .post-text {
            unicode-bidi: plaintext;
        }

        /* Per-line script segments (set by the segmentation script below).
           Each line gets its own direction, alignment and typeface, so a post
           mixing English and Urdu no longer forces Nastaliq onto the English.
           .ur = Urdu/Persian -> Nastaliq;  .ar = Arabic -> Naskh. */
        .rtl-seg, .ltr-seg { display: block; }
        .ltr-seg { direction: ltr; text-align: left; }
        .seg-blank { min-height: 0.75em; }
        .rtl-seg {
            direction: rtl;
            text-align: right;
        }
        .rtl-seg.ur {
            font-family: 'Gulzar', 'Noto Nastaliq Urdu', serif;
            line-height: 2.05;
        }
        .rtl-seg.ar {
            font-family: 'Noto Naskh Arabic', serif;
            line-height: 1.9;
        }

        /* Post box styling */
        .post-box {
            width: 500px;
            max-width: 100%;
        }


        /* Bio/intro text */
        .bio-text {
            unicode-bidi: plaintext;
        }

        /* Rendered markdown (post detail + expanded "Read more" in feed).
           Intentionally restrained: enough hierarchy to be readable, not so
           much that one post can dominate the visual field. */
        .prose { line-height: 1.65; word-wrap: break-word; }
        .prose > * + * { margin-top: 0.85em; }
        .prose h1 { font-size: 1.35em; font-weight: 700; line-height: 1.3; }
        .prose h2 { font-size: 1.2em;  font-weight: 700; line-height: 1.3; }
        .prose h3 { font-size: 1.1em;  font-weight: 600; line-height: 1.3; }
        .prose h4, .prose h5, .prose h6 { font-size: 1em; font-weight: 600; }
        .prose p  { margin: 0; }
        .prose ul { list-style: disc;    padding-left: 1.25rem; }
        .prose ol { list-style: decimal; padding-left: 1.5rem;  }
        .prose li + li { margin-top: 0.25em; }
        .prose a  { color: #2563eb; text-decoration: underline; text-underline-offset: 2px; }
        .dark .prose a { color: #60a5fa; }
        .prose code {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.9em;
            background: #F0F2F5;
            padding: 0.1em 0.35em;
            border-radius: 3px;
        }
        .dark .prose code { background: #1f2937; }
        .prose pre {
            font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
            font-size: 0.9em;
            background: #F0F2F5;
            padding: 0.75em 1em;
            border-radius: 4px;
            overflow-x: auto;
        }
        .dark .prose pre { background: #1f2937; }
        .prose pre code { background: transparent; padding: 0; border-radius: 0; }
        .prose blockquote {
            border-left: 3px solid #d1d5db;
            padding-left: 0.85em;
            color: #4b5563;
        }
        .dark .prose blockquote { border-color: #4b5563; color: #9ca3af; }
        .prose hr { border: 0; border-top: 1px solid #e5e7eb; }
        .dark .prose hr { border-color: #374151; }
        .prose img { max-width: 100%; height: auto; border-radius: 4px; }
        .prose table { border-collapse: collapse; }
        .prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.4em 0.6em; }
        .dark .prose th, .dark .prose td { border-color: #374151; }

        /* Notifications tea glass. Neutral by design — a grey count, never a
           red badge. This tells you something happened; it is not trying to
           pull you back in. */
        .chai-bell { position: relative; display: inline-flex; align-items: center;
                     padding: 0.5rem; margin: 0 -0.15rem; border-radius: 9999px;
                     color: #6b7280; transition: background .12s, color .12s; }
        .chai-bell:hover { background: #f3f4f6; color: #111827; }
        .chai-bell svg { width: 20px; height: 20px; }
        .chai-bell .n { position: absolute; top: 1px; right: -1px;
                        min-width: 16px; height: 16px; padding: 0 4px;
                        border-radius: 9999px; background: #6b7280; color: #fff;
                        font-size: 10px; font-weight: 600; line-height: 16px;
                        text-align: center; font-variant-numeric: tabular-nums; }
        .chai-bell.has-unread { color: #374151; }
        .dark .chai-bell { color: #9ca3af; }
        .dark .chai-bell:hover { background: #374151; color: #f3f4f6; }
        .dark .chai-bell.has-unread { color: #e5e7eb; }
        .dark .chai-bell .n { background: #9ca3af; color: #111827; }

        /* Keyboard-navigation focus ring on feed-page post cards
           (toggled by the j/k/n/p handler in the script block below). */
        .post-focused {
            box-shadow: 0 0 0 2px #374151;
            transition: box-shadow 0.12s ease;
        }
        .dark .post-focused {
            box-shadow: 0 0 0 2px #d1d5db;
        }

/* ===== post cards and reading variants ===== */
/* =====================================================================
       Reading-style previews (?try=1..5). Self-contained CSS — no Tailwind
       rebuild needed. Shared components first, then the five themes.
       Post width stays 500px via the existing .post-box class.
       ===================================================================== */

    /* ---- switcher bar ---- */
    .try-switcher { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap;
        max-width:500px; margin:0 auto 1.25rem; padding:.5rem .7rem; font-size:.8rem;
        background:#fff; border:1px solid #e5e7eb; border-radius:10px; color:#6b7280; }
    .try-switcher .label { font-weight:600; color:#374151; margin-right:.25rem; }
    .try-switcher a { text-decoration:none; color:#6b7280; padding:.2rem .55rem; border-radius:9999px; line-height:1.4; }
    .try-switcher a:hover { background:#f3f4f6; color:#111827; }
    .try-switcher a.active { background:#111827; color:#fff; }
    .try-switcher a.reset { margin-left:auto; color:#9ca3af; }
    .dark .try-switcher { background:#1f2937; border-color:#374151; }
    .dark .try-switcher .label { color:#e5e7eb; }
    .dark .try-switcher a.active { background:#e5e7eb; color:#111827; }

    /* ---- active tag filter ----
       A borderless header aligned to the post column (width via .post-box),
       with the tag shown as a filled "active" pill (same language as the
       light .post-tag chips) and a quiet Clear. */
    .tag-filter { display:flex; align-items:center; justify-content:space-between;
        gap:.75rem; margin-bottom:1.1rem; }
    .tag-filter .tf-tag { display:inline-flex; align-items:center; gap:.35rem; min-width:0;
        font-size:.85rem; font-weight:600; padding:.32rem .85rem; border-radius:9999px;
        background:#111827; color:#fff; }
    .tag-filter .tf-tag svg { width:13px; height:13px; opacity:.65; flex-shrink:0; }
    .tag-filter .tf-tag .tf-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .tag-filter .tf-clear { display:inline-flex; align-items:center; gap:.25rem; flex-shrink:0;
        color:#9ca3af; font-size:.82rem; text-decoration:none; }
    .tag-filter .tf-clear:hover { color:#111827; }
    .tag-filter .tf-clear svg { width:14px; height:14px; }
    .dark .tag-filter .tf-tag { background:#e5e7eb; color:#111827; }
    .dark .tag-filter .tf-clear:hover { color:#fff; }

    /* ---- shared card scaffolding ---- */
    /* --rtl-scale 1.25: Gulzar draws small inside a very tall em box (1500
       ascent / -1200 descent, alef only 0.583em), so it needs SOME upscaling
       to stay legible — below ~16px the hairlines mush and the nuqtas merge.
       But not much: once script segmentation kept English at its own 14px,
       anything past ~1.3 made the two sizes visibly clash inside one post.
       14px body -> ~17.5px Urdu. */
    .pv { position:relative; --rtl-scale:1.25; }
    .pv .pv-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
    .pv .pv-meta { display:flex; align-items:center; gap:.5rem; color:#9ca3af; font-size:.8rem; white-space:nowrap; }
    /* Comment affordance. Sits in the meta row next to the date, which is
       already the "go to this post" cluster. Muted at zero so it reads as an
       invitation rather than a metric, and picks up ink once a conversation
       exists — this is a discovery aid, not a score to chase. */
    .pv .pv-comments { display:inline-flex; align-items:center; gap:.22rem;
        text-decoration:none; color:#b6bcc6; font-size:.78rem;
        font-variant-numeric:tabular-nums; transition:color .12s ease; }
    .pv .pv-comments svg { width:14px; height:14px; }
    .pv .pv-comments.has-any { color:#7c8595; }
    .pv .pv-comments:hover { color:#111827; }
    .dark .pv .pv-comments { color:#5b6472; }
    .dark .pv .pv-comments.has-any { color:#9aa3ae; }
    .dark .pv .pv-comments:hover { color:#f3f4f6; }

    .pv .pv-date { text-decoration:none; color:inherit; }
    .pv .pv-date:hover { text-decoration:underline; }

    /* ---- visibility icon + tooltip ---- */
    .vis { position:relative; display:inline-flex; align-items:center; color:#9ca3af; outline:none; cursor:default; }
    .vis svg { width:14px; height:14px; }
    .vis-tip { position:absolute; bottom:calc(100% + 7px); right:-2px; z-index:30;
        background:#111827; color:#f9fafb; font-size:11px; line-height:1.3; padding:5px 8px;
        border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none;
        transition:opacity .12s ease; box-shadow:0 6px 18px rgba(0,0,0,.22); }
    .vis:hover .vis-tip, .vis:focus .vis-tip, .vis:focus-within .vis-tip { opacity:1; }
    .dark .vis-tip { background:#e5e7eb; color:#111827; }

    /* ---- kebab actions menu (native <details>) ---- */
    .post-actions { position:relative; display:inline-block; }
    .post-actions > summary { list-style:none; display:inline-flex; align-items:center; justify-content:center;
        width:28px; height:28px; border-radius:9999px; color:#9ca3af; cursor:pointer;
        transition:background .12s, color .12s; }
    .post-actions > summary::-webkit-details-marker { display:none; }
    .post-actions > summary svg { width:16px; height:16px; }
    .post-actions > summary:hover, .post-actions[open] > summary { background:#f3f4f6; color:#374151; }
    .post-actions .menu { position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:152px;
        background:#fff; border:1px solid #e5e7eb; border-radius:10px; padding:4px;
        box-shadow:0 10px 28px rgba(17,24,39,.14); }
    .post-actions .menu-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left;
        padding:7px 9px; border-radius:7px; font-size:13px; color:#374151; text-decoration:none;
        background:none; border:none; cursor:pointer; font-family:inherit; }
    .post-actions .menu-item:hover { background:#f3f4f6; }
    .post-actions .menu-item svg { width:15px; height:15px; opacity:.7; flex-shrink:0; }
    .post-actions .menu-item-danger { color:#dc2626; }
    .post-actions .menu-item-danger:hover { background:#fef2f2; }
    .dark .post-actions > summary:hover, .dark .post-actions[open] > summary { background:#374151; color:#e5e7eb; }
    .dark .post-actions .menu { background:#1f2937; border-color:#374151; box-shadow:0 10px 28px rgba(0,0,0,.5); }
    .dark .post-actions .menu-item { color:#e5e7eb; }
    .dark .post-actions .menu-item:hover { background:#374151; }
    .dark .post-actions .menu-item-danger { color:#f87171; }
    .dark .post-actions .menu-item-danger:hover { background:rgba(127,29,29,.35); }

    /* ---- shared body bits (link card, tags, read-more) ---- */
    .pv .post-link { display:block; text-decoration:none; margin-top:.9rem; padding:.7rem .8rem;
        border-radius:9px; background:#f7f8fa; }
    .pv .post-link-title { display:block; font-weight:600; color:#2563eb; }
    .pv .post-link:hover .post-link-title { text-decoration:underline; }
    .pv .post-link-domain { display:block; font-size:.72rem; color:#9ca3af; margin-top:.1rem; }
    .pv .post-link-text { display:block; font-size:.86rem; color:#6b7280; margin-top:.3rem; line-height:1.5; }
    .pv .post-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
    .pv .post-tag { font-size:.72rem; text-decoration:none; padding:.15rem .6rem; border-radius:9999px;
        color:#6b7280; background:#f3f4f6; }
    .pv .post-tag:hover { background:#e5e7eb; color:#111827; }
    .pv .read-more-btn { display:inline-block; margin-top:.55rem; font-size:.82rem; color:#9ca3af;
        background:none; border:none; cursor:pointer; padding:0; font-family:inherit; }
    .pv .read-more-btn:hover { color:#111827; text-decoration:underline; }
    .dark .pv .post-link { background:rgba(255,255,255,.04); }
    .dark .pv .post-link-text { color:#9ca3af; }
    .dark .pv .post-tag { background:#374151; color:#d1d5db; }
    .dark .pv .post-tag:hover { background:#4b5563; color:#fff; }
    .dark .pv .read-more-btn:hover { color:#fff; }

    /* ---- j/k keyboard-nav selection ring ----
       The variants set their own box-shadow, which swallows the default
       .post-focused box-shadow ring (that's why it didn't show on the card
       variants). Use an OUTLINE instead: it doesn't fight box-shadow, follows
       the card's rounded corners, and sits just outside via outline-offset —
       giving the clear outer boundary on every variant. */
    .pv.post-focused { outline:2.5px solid #374151; outline-offset:3px; }
    .dark .pv.post-focused { outline-color:#cbd5e1; }

    /* =============  1 · 2 · 5 — Airy (shared, font-size A/B)  =============
       Identical airy white card; the three differ ONLY in body font-size:
       #2 = 16px (base), #1 = 15px, #5 = 14px (size overrides just below).
       Nastaliq stays at its shared RTL size regardless — this compares the
       Latin body only. */
    .pv-airy { background:#fff; border:0; border-radius:16px;
        padding:1.7rem 1.75rem 1.8rem; margin-bottom:1.15rem;
        box-shadow:0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(17,24,39,.05); }
    .pv-airy .pv-author { font-weight:600; color:#111827; font-size:.95rem; text-decoration:none; }
    .pv-airy .pv-author:hover { text-decoration:underline; }
    .pv-airy .post-text { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        font-size:16px; --body:16px; line-height:1.85; color:#2d333b; margin-top:.85rem; }
    .pv-sz15 .post-text { font-size:15px; --body:15px; }   /* variant 1 */
    .pv-sz14 .post-text { font-size:14px; --body:14px; }   /* variants 5 & 2 */
    .pv.pv-urdu-1x { --rtl-scale:1; }   /* variant 2 — Urdu at 1.0× (= English) */
    .dark .pv-airy { background:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.35); }
    .dark .pv-airy .pv-author { color:#f3f4f6; }
    .dark .pv-airy .post-text { color:#dde1e6; }

    /* =====================  3 · Soft Card  ===================== */
    .pv-cardy { background:#fff; border:0; border-radius:18px; padding:1.2rem 1.35rem 1.4rem;
        margin-bottom:1.1rem; box-shadow:0 1px 2px rgba(0,0,0,.04), 0 10px 26px rgba(17,24,39,.06); }
    .pv-cardy .pv-headrow { display:flex; align-items:center; gap:.6rem; }
    .pv-cardy .avatar { width:34px; height:34px; border-radius:9999px; flex-shrink:0;
        background:linear-gradient(135deg,#64748b,#334155); color:#fff; display:inline-flex;
        align-items:center; justify-content:center; font-size:.82rem; font-weight:700; }
    .pv-cardy .pv-author { font-weight:600; color:#111827; font-size:.92rem; text-decoration:none; }
    .pv-cardy .pv-author:hover { text-decoration:underline; }
    .pv-cardy .post-text { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        font-size:1.05rem; --body:1.05rem; line-height:1.72; color:#242a31; margin-top:.8rem; }
    .dark .pv-cardy { background:#1f2937; box-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px rgba(0,0,0,.4); }
    .dark .pv-cardy .pv-author { color:#f3f4f6; }
    .dark .pv-cardy .post-text { color:#e5e7eb; }

    /* =====================  4 · Vivid Accent  =====================
       Contained card (same margins as 3 & 5) with a colorful gradient edge
       and accent-tinted author / tags / link. Lively but not loud. */
    .pv-vivid { position:relative; overflow:hidden; background:#fff; border:1px solid #ecebfb;
        border-radius:14px; padding:1.35rem 1.5rem 1.45rem 1.65rem; margin-bottom:1.15rem;
        box-shadow:0 1px 2px rgba(0,0,0,.03), 0 8px 22px rgba(99,102,241,.08); }
    .pv-vivid::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
        background:linear-gradient(180deg,#6366f1,#a855f7); }
    .pv-vivid .pv-author { font-weight:700; color:#4f46e5; font-size:.95rem; text-decoration:none; }
    .pv-vivid .pv-author:hover { color:#4338ca; }
    .pv-vivid .pv-meta { color:#9d9ab5; }
    .pv-vivid .post-text { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
        font-size:0.97rem; --body:0.97rem; line-height:1.72; color:#2a2740; margin-top:.75rem; }
    .pv-vivid .post-link { background:#f5f5ff; border-left:3px solid #a5b4fc; }
    .pv-vivid .post-link-title { color:#4f46e5; }
    .pv-vivid .post-tag { background:#eef2ff; color:#4f46e5; }
    .pv-vivid .post-tag:hover { background:#e0e7ff; color:#4338ca; }
    .dark .pv-vivid { background:#1e1b34; border-color:#332d5a;
        box-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 22px rgba(0,0,0,.4); }
    .dark .pv-vivid::before { background:linear-gradient(180deg,#818cf8,#c084fc); }
    .dark .pv-vivid .pv-author { color:#a5b4fc; }
    .dark .pv-vivid .post-text { color:#e5e3f5; }
    .dark .pv-vivid .post-link { background:#26224a; border-left-color:#6366f1; }
    .dark .pv-vivid .post-link-title { color:#c7d2fe; }
    .dark .pv-vivid .post-tag { background:#312b57; color:#c7d2fe; }
    .dark .pv-vivid .post-tag:hover { background:#3d366b; color:#e0e7ff; }

    /* Variants 1 & 5 reuse the Airy design above (via .pv-sz15 / .pv-sz14). */

    /* =====================  RTL segments (Urdu / Arabic)  =====================
       Applied per LINE, not per post (see the segmentation script in base.html),
       so a post that mixes English and Urdu keeps each in its own typeface and
       size. The Latin reading fonts above must never win over an RTL segment,
       hence the .pv prefix for specificity. */
    .pv .rtl-seg {
        direction:rtl; text-align:right;
        /* Nastaliq is mostly hairlines — at #2d333b they go grey and lose
           presence. Darker ink restores stroke weight without the harshness
           of pure black. Default AA on purpose: -webkit-font-smoothing:
           antialiased visibly THINS these strokes. */
        color:#14181d;
        margin-top:.55rem;
    }
    /* Urdu/Persian → Nastaliq. Scales with each variant's Latin body size
       instead of a fixed lump; tune the ratio via --rtl-scale. */
    .pv .rtl-seg.ur {
        font-family:'Gulzar','Noto Nastaliq Urdu',serif;
        font-size:calc(var(--body, 1rem) * var(--rtl-scale, 1.6));
        /* 2.05, not 2.55: Gulzar's em box already carries the cascade's
           vertical travel, so extra leading only scatters the couplet. */
        line-height:2.05;
    }
    /* Arabic → Naskh. Needs less upscaling than Nastaliq (larger apparent
       size) and much less leading (no diagonal cascade to clear). */
    .pv .rtl-seg.ar {
        font-family:'Noto Naskh Arabic',serif;
        font-size:calc(var(--body, 1rem) * var(--ar-scale, 1.25));
        line-height:1.9;
    }
    .dark .pv .rtl-seg { color:#f0ece4; }

/* ---- Link preview on the compose form ----
   Editable, because fetched metadata is often wrong and only the author can
   tell. Styled here rather than inline so the compose page stays cacheable. */
.up-card { margin-top: .7rem; padding: .8rem .9rem; border: 1px solid #e2e6ea;
           border-radius: 10px; background: #f9fafb; }
.dark .up-card { background: rgba(255,255,255,.04); border-color: #313945; }
.up-label { margin: 0 0 .6rem; font-size: .7rem; text-transform: uppercase;
            letter-spacing: .09em; color: #7c8595; }
.dark .up-label { color: #9aa3ae; }
.up-field { display: block; margin-bottom: .55rem; }
.up-field:last-child { margin-bottom: 0; }
.up-field > span { display: block; font-size: .72rem; color: #7c8595; margin-bottom: .2rem; }
.dark .up-field > span { color: #9aa3ae; }
.up-field input, .up-field textarea {
    width: 100%; padding: .45rem .6rem; font-size: .875rem; line-height: 1.5;
    font-family: inherit; color: #111827; background: #fff;
    border: 1px solid #dfe3e8; border-radius: 7px; resize: vertical; }
.dark .up-field input, .dark .up-field textarea {
    background: #111827; border-color: #374151; color: #f3f4f6; }
.up-field input:focus, .up-field textarea:focus {
    outline: none; border-color: #9ca3af; box-shadow: 0 0 0 3px rgba(156,163,175,.22); }
.up-error { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.dark .up-error { background: rgba(120,53,15,.2); border-color: #7c2d12; color: #fdba74; }
.up-error p { margin: 0; font-size: .85rem; }
.up-error .up-hint { margin-top: .3rem; font-size: .78rem; opacity: .85; }
/* htmx toggles .htmx-request on the indicator while a fetch is in flight. */
.up-busy { display: none; margin-top: .5rem; font-size: .78rem; color: #7c8595; }
.up-busy.htmx-request { display: block; }