/* ==========================================================================
   HumanProse luxury finish
   Loaded after hp-design.css on every page that includes
   partials/hp-design.blade.php. Five quiet layers:
     1. Arabic display face (Markazi Text) for headings, Amiri kept for the
        brass accents.
     2. Paper: an ivory grain in the light theme, a fine linen in the dark.
     3. Gilded edges on the few cards that matter (js/hp-luxe.js adds the
        .hp-gild ring so no card loses its own ::before / ::after).
     4. Library dark: the desk-lamp glow that follows the pointer.
     5. The brass-quill cursor and the sound switch.
   The admin area keeps its own skin: nothing here applies to it.
   ========================================================================== */

/* ---------- 1. Arabic display face ---------- */
@font-face {
    font-family: "HP Arabic Heading";
    src: url("../fonts/markazi-text-arabic-wght-normal.woff2") format("woff2-variations"),
         url("../fonts/markazi-text-arabic-wght-normal.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}
html[lang="ar"] {
    --hx-f-display: "HP Arabic Heading", "HP Arabic Display", "HP Display", Georgia, serif;
    --hx-f-accent: "HP Arabic Display", "HP Display", Georgia, serif;
}
/* Every heading's Arabic letters take Markazi. Display headings already use
   --hx-f-display (Latin falls back to Instrument Serif); plain headings use
   --hx-f-body, so inside them the body stack is re-pointed at Markazi and
   their Latin words (plan names, "HumanProse") stay in the sans, exactly
   as the English headings do. Small UI labels keep the sans. */
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) :is(h1, h2, h3):not([class*="text-xs"], [class*="text-sm"]) {
    --hx-f-body: "HP Arabic Heading", "HP Arabic", "HP Sans", "Segoe UI", Tahoma, sans-serif;
    font-synthesis-weight: none;
}
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) :is(h2, h3):not(.hp-display) { line-height: 1.4; }
/* Markazi carries display sizes best a step lighter than Amiri did. */
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) .hp-display,
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) :is(.hp-hero-title, .feature-title, .reset-title, .hpg-banner-title, .hpb-plan-name),
html[lang="ar"] body.hp-ui.hp-app:not(.hp-admin, .hp-admin-login) .hero h1,
html[lang="ar"] body.hp-ui:is(.hp-card-page, .hp-maint) h1 {
    font-weight: 600 !important;
    font-synthesis-weight: none;
}
/* The brass half of a headline keeps Amiri's calligraphic hand, the way
   the English headlines turn to Instrument Serif italic. */
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) :is(.hp-display, h1, h2) em,
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) .hp-hero-title > span,
html[lang="ar"] body.hp-ui:not(.hp-admin, .hp-admin-login) .feature-title > .gradient-text {
    font-family: var(--hx-f-accent) !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* ---------- 2. Paper and linen ----------
   One fixed sheet behind all content. body becomes its own stacking
   context so the sheet (z-index -1) paints above the body colour and below
   every element; form fields and cards paint over it, so they stay clean. */
body.hp-ui:not(.hp-admin, .hp-admin-login) { isolation: isolate; }
html body.hp-ui:not(.hp-admin, .hp-admin-login)::before {
    content: "" !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    background-size: 240px 240px !important;
    background-repeat: repeat !important;
    background-position: 0 0 !important;
    animation: none !important;
    transform: none !important;
    /* Ivory paper: fine fibre grain, warm brown, a few percent at most. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .15 1.35 0 0 0 -.56'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E") !important;
}
/* Library linen: fine warp and weft, ivory on deep green. */
html[data-hp-theme="dark"] body.hp-ui:not(.hp-admin, .hp-admin-login)::before {
    background-size: 220px 220px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .045' numOctaves='2' seed='3' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .9' numOctaves='2' seed='9' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='screen'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .88 0 0 0 0 .76 1.6 0 0 0 -1.02'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)' opacity='.085'/%3E%3C/svg%3E") !important;
}
/* Pages that paint their own full-bleed backdrop on body keep it; the
   sheet simply lies on top of it. */

/* ---------- 3. Gilded edges ---------- */
body.hp-ui .hp-gilded { position: relative; }
body.hp-ui .hp-gild {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit; padding: 1px;
    background: linear-gradient(115deg,
        #8a6328 0%, #d9b277 14%, #f6e3bd 22%, #b8894a 32%, #7a5523 46%,
        #c99a5b 58%, #f3dcae 66%, #a87b3d 78%, #8a6328 100%);
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .9;
    transition: background-position 2.8s cubic-bezier(.3, .1, .2, 1), opacity .6s ease;
}
/* The sheen travels slowly across the edge while the card is in hand. */
body.hp-ui .hp-gilded:is(:hover, :focus-within) > .hp-gild { background-position: 100% 50%; opacity: 1; }
/* A hairline of light on the top edge, as gilt catches a lamp. */
body.hp-ui .hp-gilded > .hp-gild::after {
    content: ""; position: absolute; inset: 0 12% auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 243, 220, .9), transparent);
    opacity: .55;
}
/* Cards that drew a plain 1px line of their own let the gilt replace it. */
body.hp-ui .hp-gilded:not(.hp-plan.is-featured, .auth-shell) { border-color: transparent !important; }
html[data-hp-theme="dark"] body.hp-ui .hp-gild { opacity: .78; }
html[data-hp-theme="dark"] body.hp-ui .hp-gilded:is(:hover, :focus-within) > .hp-gild { opacity: .95; }

/* ---------- 4. Library lamp (dark theme) ---------- */
.hp-lamp {
    position: fixed; z-index: -2; left: 0; top: 0;
    width: 1300px; height: 1300px; margin: -650px 0 0 -650px;
    pointer-events: none; opacity: 0;
    background: radial-gradient(closest-side,
        rgba(232, 190, 122, .135) 0%, rgba(232, 190, 122, .085) 28%,
        rgba(214, 168, 98, .04) 55%, rgba(214, 168, 98, 0) 100%);
    transform: translate3d(50vw, -8vh, 0);
    will-change: transform;
    transition: opacity .9s ease;
}
html[data-hp-theme="dark"] body.hp-ui .hp-lamp { opacity: 1; }
/* On touch screens and for reduced motion the lamp hangs still, at the top. */
.hp-lamp.is-static { transform: translate3d(50vw, -6vh, 0) !important; }

/* ---------- 5a. Brass-quill cursor ---------- */
.hp-cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
html.hp-cursor-on .hp-cursor.is-visible { opacity: 1; }
.hp-cursor-nib, .hp-cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform; }
/* The nib's tip is the hot spot: the drawing below is offset so its point
   sits on the pointer coordinate. */
.hp-cursor-nib { width: 24px; height: 24px; margin: -1px 0 0 -1px; transition: opacity .18s ease; filter: drop-shadow(0 1px 1px rgba(20, 14, 4, .35)); }
.hp-cursor-nib svg { display: block; width: 24px; height: 24px; transition: transform .25s cubic-bezier(.2, .8, .2, 1); transform-origin: 1px 1px; }
.hp-cursor-ring {
    width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
    border: 1px solid rgba(184, 137, 74, .9);
    background: radial-gradient(circle, rgba(217, 178, 119, .16), rgba(217, 178, 119, .04) 70%);
    box-shadow: 0 0 0 1px rgba(255, 248, 232, .35) inset;
    opacity: 0;
}
/* The owner wants the brass quill only: no ring. Over links and buttons the quill just tips forward a little. */
.hp-cursor-ring { display: none !important; }
.hp-cursor.is-link .hp-cursor-nib svg { transform: scale(1.12) rotate(-8deg); }
.hp-cursor.is-down .hp-cursor-nib svg { transform: scale(.86) rotate(-6deg); }
.hp-cursor.is-text .hp-cursor-nib,
.hp-cursor.is-text .hp-cursor-ring { opacity: 0 !important; }
html[data-hp-theme="dark"] .hp-cursor-ring { border-color: rgba(230, 201, 149, .85); background: radial-gradient(circle, rgba(230, 201, 149, .14), rgba(230, 201, 149, .03) 70%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25) inset; }
html[data-hp-theme="dark"] .hp-cursor-nib { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .7)); }
/* Hide the native arrow only while the quill is drawn; fields keep the
   native I-beam and caret, and anything marked native keeps its own. */
html.hp-cursor-on, html.hp-cursor-on body, html.hp-cursor-on body * { cursor: none !important; }
html.hp-cursor-on :is(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"]), textarea, select, [contenteditable]:not([contenteditable="false"]), iframe, [data-hp-native-cursor]),
html.hp-cursor-on :is([contenteditable]:not([contenteditable="false"]), [data-hp-native-cursor]) * { cursor: auto !important; }
html.hp-cursor-on :is(input:not([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="image"]), textarea, [contenteditable]:not([contenteditable="false"])) { cursor: text !important; }
html.hp-cursor-on :is(input, textarea, select):disabled { cursor: not-allowed !important; }
@media (forced-colors: active) { .hp-cursor { display: none !important; } }

/* Footer switch for the quill cursor */
body.hp-ui .hp-cursor-pref {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
    border: 1px solid var(--hx-line-2); border-radius: 999px; background: transparent;
    color: var(--hx-ink-2); font: 600 .8rem/1 var(--hx-f-body); cursor: pointer;
}
body.hp-ui .hp-cursor-pref:hover { color: var(--hx-ink); border-color: var(--hx-quill); }
body.hp-ui .hp-cursor-pref svg { width: 16px; height: 16px; flex: none; }
body.hp-ui .hp-cursor-pref .hp-cursor-pref-state {
    position: relative; width: 26px; height: 15px; border-radius: 999px; background: var(--hx-line-2); flex: none;
    transition: background-color .2s ease;
}
body.hp-ui .hp-cursor-pref .hp-cursor-pref-state::after {
    content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 11px; height: 11px; border-radius: 50%;
    background: #fcf9f3; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s var(--hx-ease, ease);
}
body.hp-ui .hp-cursor-pref[aria-pressed="true"] .hp-cursor-pref-state { background: var(--hx-royal); }
body.hp-ui .hp-cursor-pref[aria-pressed="true"] .hp-cursor-pref-state::after { transform: translateX(11px); }
[dir="rtl"] body.hp-ui .hp-cursor-pref[aria-pressed="true"] .hp-cursor-pref-state::after { transform: translateX(-11px); }
body.hp-ui .hpg-footer .hp-cursor-pref { margin-top: 2px; }

/* ---------- 5b. Sound switch (sits with the language and theme switches) ---------- */
body.hp-ui .hp-switch-sound { padding: 0; width: 40px; }
body.hp-ui .hp-switch-sound[hidden] { display: none !important; }
body.hp-ui .hp-switch-sound .hp-icon-sound-on { display: none; }
body.hp-ui .hp-switch-sound[aria-pressed="true"] .hp-icon-sound-on { display: block; }
body.hp-ui .hp-switch-sound[aria-pressed="true"] .hp-icon-sound-off { display: none; }
body.hp-ui .hp-switch-sound[aria-pressed="true"] { color: var(--hx-quill-ink); border-color: var(--hx-quill); }
@media (max-width: 560px) { body.hp-ui .hp-switch-sound { width: 36px; } }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-gild { transition: opacity .3s ease; }
    body.hp-ui .hp-gilded:is(:hover, :focus-within) > .hp-gild { background-position: 0% 50%; }
    .hp-lamp { transition: none; }
    .hp-cursor-nib svg { transition: none; }
}
@media print {
    html body.hp-ui:not(.hp-admin, .hp-admin-login)::before, .hp-lamp, .hp-cursor, .hp-gild, .hp-switch-sound, .hp-cursor-pref { display: none !important; }
    html.hp-cursor-on, html.hp-cursor-on body, html.hp-cursor-on body * { cursor: auto !important; }
}