/* paper-polish.css — small interaction and phone fixes on top of the
   floating-paper design. Loaded after main.css. Apart from the top bar
   (section 5) and Arabic pages (section 7), nothing here changes how a
   desktop page looks at rest; only presses, focus and phone widths. */

/* 1. Press feedback ------------------------------------------------------ */

/* Blog index: the whole sheet gives a little when one of its links is pressed. */
#bloglist > div {
    transition: transform 140ms ease-out, box-shadow 140ms ease-out;
}
#bloglist > div:has(a:active) {
    transform: scale(.98);
    box-shadow: 0 12px 24px -10px rgb(0 0 0 / .25);
}

/* The grey "back" circle at the top of a sheet sinks in. */
a > div > .rounded-full.shadow-inner,
a > .rounded-full.shadow-inner {
    transition: transform 140ms ease-out;
}
a:active > div > .rounded-full.shadow-inner,
a:active > .rounded-full.shadow-inner {
    transform: scale(.92);
}

/* Article prev/next arrows, the share paperclip and the language row. */
#article-content > .flex-row-reverse > a,
button[form="jump2share"],
a[hreflang] {
    transition: transform 120ms ease-out, opacity 120ms ease-out;
}
#article-content > .flex-row-reverse > a:active,
button[form="jump2share"]:active,
a[hreflang]:active {
    transform: translateY(1px);
    opacity: .6;
}

/* The arrows are one or two characters wide: give the finger a bigger
   target without moving them (padding cancelled by negative margin). */
#article-content > .flex-row-reverse > a {
    padding: .5rem 0 .5rem 1.5rem;
    margin: -.5rem 0 -.5rem -1.5rem;
}

/* The press is the feedback; drop the grey tap flash on touch screens. */
#bloglist a, #article a, a[hreflang], button[form="jump2share"] {
    -webkit-tap-highlight-color: transparent;
}

/* 2. Keyboard focus ------------------------------------------------------ */

/* !important because some originals carry focus:outline-none. */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px;
    border-radius: 2px;
}

/* 3. Phones (below Tailwind's sm breakpoint) ----------------------------- */

@media (max-width: 639.98px) {
    /* Article: 24px / leading-loose gave ~13 characters a line.
       Blog and tech pages only; the share pages size their own text. */
    #article > div.pb-28:has(> #article-content.leading-loose:is(.text-2xl, .prose-xl)) {
        margin-left: .75rem;
        margin-right: .75rem;
    }
    #article-content.leading-loose:is(.text-2xl, .prose-xl) {
        font-size: 19px;
        line-height: 1.85;
        padding-left: 1.125rem;
        padding-right: 1.125rem;
    }

    /* Search: no language row or wallet above it, so less air on top. */
    .search-title {
        margin-top: 5rem;
    }

    /* 404: the illustration is a fixed 400px wide. */
    #Layer_1 {
        max-width: 100%;
        height: auto;
    }
}

/* Touch screens keep :hover after a tap; the index author name would jump
   to text-5xl and stay there. */
@media (hover: none) {
    #bloglist a.hover\:text-5xl:hover {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

/* 4. Search page --------------------------------------------------------- */

.search-sheet {
    padding: 2.5rem 1.25rem 4rem;
}
.search-form {
    display: flex;
    gap: .75rem;
    margin-bottom: 2.5rem;
}
.search-form input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: .5rem .25rem;
    font-size: 1.25rem;
    border-bottom: 1px solid #d1d5db;
    background: transparent;
}
.search-form input[type="text"]:focus {
    border-bottom-color: #38bdf8;
    outline: none;
}
.search-form .button {
    padding: .5rem 1.25rem;
    color: #fff;
    background: #0ea5e9;
    border-radius: .5rem;
    cursor: pointer;
    transition: transform 120ms ease-out, background-color 120ms ease-out;
}
.search-form .button:hover { background: #0284c7; }
.search-form .button:active { transform: translateY(1px); }
.search-results > li + li { margin-top: 1.75rem; }
.search-results h4 { font-size: 1.5rem; line-height: 1.5; }
.search-results a {
    color: #0284c7;
    text-decoration: underline;
    text-decoration-color: #d1d5db;
    text-underline-offset: 6px;
}
.search-results a:hover { text-decoration-color: #38bdf8; }
.search-results p { margin-top: .25rem; color: #6b7280; line-height: 1.75; }
.search-pages {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
    color: #0284c7;
}
.search-empty { color: #737373; }

@media (min-width: 768px) {
    .search-sheet { padding: 3.5rem 4rem 5rem; }
}
@media (min-width: 1280px) {
    .search-sheet { padding: 4rem 8rem 6rem; }
}

/* 5. Top bar: language links and Connect Wallet on one line -------------- */

.reader-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: #f9fafb;
}
.topbar-langs {
    flex: 1;
    flex-wrap: wrap;
    column-gap: 1rem;
}
.reader-topbar #wallet {
    position: relative;
    margin-left: auto;
}
.reader-topbar #wallet .bg-gray-100 {
    background: transparent;
}
.reader-topbar #wallet .bg-gray-100 > div {
    margin: .25rem .5rem;
}
/* The wallet's error notice drops below the bar instead of stretching it. */
.reader-topbar #wallet [role="alert"] {
    position: absolute;
    top: 100%;
    right: .5rem;
    z-index: 10;
    width: max-content;
    max-width: calc(100vw - 1rem);
}
/* Phone: the open language list takes its own full-width line under the bar. */
@media (max-width: 767.98px) {
    .topbar-phone {
        display: contents;
    }
    #language-switch-dropdown {
        order: 1;
        flex-basis: 100%;
    }
}

/* 6. Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    #bloglist > div, a > div > .rounded-full.shadow-inner, a > .rounded-full.shadow-inner,
    #article-content > .flex-row-reverse > a, button[form="jump2share"], a[hreflang],
    .search-form .button {
        transition: none;
    }
    #bloglist > div:has(a:active), a:active > div > .rounded-full.shadow-inner,
    a:active > .rounded-full.shadow-inner, #article-content > .flex-row-reverse > a:active,
    button[form="jump2share"]:active, a[hreflang]:active, .search-form .button:active {
        transform: none;
    }
}

/* 7. Right-to-left pages (Arabic: <html dir="rtl">) ------------------------
   Everything here is scoped to [dir="rtl"], so left-to-right pages are untouched. */

/* The back circle keeps its distance from the sheet's (now right) edge, and
   the clock its gap after the author's name. */
[dir="rtl"] :is(#article, #bloglist) .ml-3 {
    margin-left: 0;
    margin-right: .75rem;
}

/* Page-turn arrows sit at the left end now (and "<" is drawn ">" by the
   bidi mirroring of the glyph); their larger tap target grows inward, to the right. */
[dir="rtl"] #article-content > .flex-row-reverse > a {
    padding: .5rem 1.5rem .5rem 0;
    margin: -.5rem -1.5rem -.5rem 0;
}

/* Poem blocks: the sky-blue bar and its pilcrow move to the right-hand side. */
[dir="rtl"] #article-content .border-l-2.border-sky-400 {
    text-align: right;
    padding-left: 0;
    padding-right: .75rem;
    border-left-width: 0;
    border-right-width: 2px;
}
[dir="rtl"] #article-content .border-l-2.border-sky-400 > .fa-paragraph {
    left: auto;
    right: 0;
    transform: translate(50%, -50%) !important; /* overrides the inline style */
}
[dir="rtl"] #article-content .border-l-2.border-sky-400 > p {
    padding-left: 0;
    padding-right: .5rem;
}
/* Quote blocks: the grey bar too. */
[dir="rtl"] #article-content blockquote.border-l-2 {
    border-left-width: 0;
    border-right-width: 2px;
}
/* Code reads left to right in any language. */
[dir="rtl"] #article-content pre {
    direction: ltr;
    text-align: left;
}
[dir="rtl"] #article-content code {
    unicode-bidi: isolate;
}
/* Titles, author names and dates may be Chinese or Latin text: give each
   its own direction so "2025：AI/LLM" doesn't come out as "AI/LLM：2025". */
[dir="rtl"] :is(h1, .glass-effect, time, a[rel="author"]) {
    unicode-bidi: plaintext;
}
/* Connect Wallet, the comments, the copyright line and the 404 page are
   written in Chinese and English; they keep their left-to-right layout. */
[dir="rtl"] .reader-topbar #wallet,
[dir="rtl"] [id="404"],
[dir="rtl"] #wallet-comments,
[dir="rtl"] footer > .bg-gray-400 {
    direction: ltr;
}
/* Mirror of section 5: the wallet sits at the far (left) end of the bar. */
[dir="rtl"] .reader-topbar #wallet {
    margin-left: 0;
    margin-right: auto;
}

/* 8. Long unbroken tokens in an article --------------------------------
   A 60-digit bit string or a long URL used to push a phone page to twice
   its width. Words that fit are laid out exactly as before; only a word
   wider than the line breaks, and code blocks scroll inside the sheet. */

#article-content {
    overflow-wrap: break-word;
}
#article-content pre {
    max-width: 100%;
    overflow-x: auto;
}

/* 9. The sheet: industrial A4 stock ------------------------------------
   A trimmed sheet of cool office paper resting on the desk: a fine tooth
   and soft formation in the stock, a hairline cut edge, a short contact
   shadow, and one tick at the right edge every A4 page (width x 1.4142).
   Nothing is printed on it but the text and one sky-blue cut. */

/* The designed margins (the wallet bundle's .px-5 used to beat them). */
@media (min-width: 640px)  { #article #article-content { padding-inline: 2rem; } }
@media (min-width: 768px)  { #article #article-content { padding-inline: 4rem; } }
@media (min-width: 1024px) { #article #article-content { padding-inline: 5rem; } }
@media (min-width: 1280px) { #article #article-content { padding-inline: 8rem; } }

main#article { background-color: #eef0f2; }

#article > div.shadow-2xl.bg-white {
    position: relative;
    border-radius: 0;
    background-color: #ffffff;
    background-image: url("../images/paper-a4-tick.8c0e4c83de83.svg"), url("../images/paper-grain.169572cc3018.svg");
    background-size: 100% auto, 260px 260px;
    background-repeat: repeat-y, repeat;
    box-shadow:
        0 0 0 1px rgb(15 23 42 / .08),
        0 1px 2px rgb(15 23 42 / .06),
        0 14px 30px -18px rgb(15 23 42 / .20);
}
#article #article-content { position: relative; z-index: 1; color: #1b1e23; }

/* The one cut: a sky-blue hairline in the left margin beside the opening lines. */
#article > div.shadow-2xl.bg-white::after {
    content: "";
    position: absolute;
    top: 6rem;
    left: 4rem;
    width: 1px;
    height: 4rem;
    background: #0ea5e9;
    opacity: .9;
    pointer-events: none;
}
@media (max-width: 1279.98px) { #article > div.shadow-2xl.bg-white::after { left: 2.5rem; } }
@media (max-width: 1023.98px) { #article > div.shadow-2xl.bg-white::after { left: 2rem; } }
@media (max-width: 767.98px)  { #article > div.shadow-2xl.bg-white::after { left: 1rem; } }

/* Phone: a page tick every seven lines is noise; keep the stock, drop the ticks. */
@media (max-width: 639.98px) {
    #article > div.shadow-2xl.bg-white {
        margin-left: 1rem;
        margin-right: 1rem;
        background-image: url("../images/paper-grain.169572cc3018.svg");
        background-size: 260px 260px;
        background-repeat: repeat;
    }
    #article #article-content.leading-loose { padding-left: 1.9rem; padding-right: 1.9rem; }
    #article > div.shadow-2xl.bg-white::after { left: .75rem; top: 5rem; height: 2.5rem; }
}