/* ==========================================================================
   Focus mode (public/js/hp-focus.js, partials/hp-focus-layer.blade.php)
   A quiet full-screen page for writing and reading: one comfortable measure,
   large type, a soft ambient light and a single bar at the bottom.
   Colours come from the design tokens, so light, dark and any paper texture
   layered on the page follow automatically.
   ========================================================================== */

html.hp-focus-on,
html.hp-focus-on body { overflow: hidden !important; }
html.hp-focus-on :is(.hp-help, .hp-install, .hp-tour, .hp-tour-pop, .site-announcements) { visibility: hidden !important; }

.hp-focus[hidden] { display: none !important; }

.hp-focus {
    --hpf-measure: 70ch;
    --hpf-type: clamp(1.125rem, 1rem + .42vw, 1.375rem);
    --hpf-bar-bg: color-mix(in srgb, var(--hx-paper, #f4efe6) 84%, transparent);
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: var(--hx-paper, #f4efe6);
    color: var(--hx-ink, #14231c);
    font-family: var(--hx-f-body, system-ui, sans-serif);
    opacity: 0;
    transition: opacity .28s var(--hx-ease, ease);
    isolation: isolate;
}
.hp-focus.is-open { opacity: 1; }
.hp-focus:fullscreen { width: 100%; height: 100%; background: var(--hx-paper, #f4efe6); }
.hp-focus::backdrop { background: var(--hx-paper, #f4efe6); }

/* Soft light from above and a forest glow below, both from the tokens. */
.hp-focus-ambient {
    position: absolute;
    inset: -10%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 45% at 50% 0%, color-mix(in srgb, var(--hx-quill, #b8894a) 13%, transparent), transparent 70%),
        radial-gradient(70% 50% at 50% 105%, color-mix(in srgb, var(--hx-royal, #0f4536) 11%, transparent), transparent 72%);
    animation: hpf-breathe 24s ease-in-out infinite alternate;
}
@keyframes hpf-breathe {
    from { transform: translate3d(0, -1.5%, 0) scale(1); }
    to { transform: translate3d(0, 1.5%, 0) scale(1.04); }
}

.hp-focus-sr {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0 0 0 0) !important;
    white-space: nowrap !important; border: 0 !important;
}

/* ---------- Stage: the page itself ---------- */
.hp-focus-stage {
    position: relative;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: clamp(1.5rem, 6vh, 4.5rem) 1rem 0;
}
.hp-focus-draft,
.hp-focus-reader {
    width: min(100%, var(--hpf-measure));
    height: 100%;
    font-size: var(--hpf-type);
}
.hp-focus-draft[hidden], .hp-focus-reader[hidden], .hp-focus-empty[hidden] { display: none !important; }

html body .hp-focus .hp-focus-draft :is(textarea, .text-editor) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 4rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--hx-ink, #14231c) !important;
    caret-color: var(--hx-quill, #b8894a);
    font-family: var(--hx-f-body, system-ui, sans-serif) !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: 1.78 !important;
    letter-spacing: 0 !important;
    resize: none !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--hx-line-2, #cfc3ad) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 2rem, #000 calc(100% - 3.5rem), transparent 100%);
}
html body .hp-focus .hp-focus-draft textarea::placeholder { color: var(--hx-ink-3, #57635b) !important; opacity: .8; }
html[lang="ar"] body .hp-focus .hp-focus-draft textarea:placeholder-shown { font-family: "HP Arabic", var(--hx-f-body, system-ui) !important; }
html body .hp-focus.is-typewriter .hp-focus-draft textarea { padding-block: 42vh !important; }

.hp-focus-reader {
    overflow-y: auto;
    padding-bottom: 5rem;
    font-family: var(--hx-f-display, Georgia, serif);
    font-size: calc(var(--hpf-type) * 1.16);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 4rem), transparent 100%);
    line-height: 1.62;
    color: var(--hx-ink, #14231c);
    white-space: pre-line;
    overflow-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: var(--hx-line-2, #cfc3ad) transparent;
}
.hp-focus-reader:focus { outline: none; }
.hp-focus-reader:focus-visible { outline: none; }
.hp-focus-reader p { margin: 0 0 1.05em; }
.hp-focus-reader p:first-child::first-letter { color: var(--hx-quill-ink, #6e4b1c); }

.hp-focus-empty {
    align-self: center;
    max-width: 34ch;
    margin: 0 auto;
    text-align: center;
    color: var(--hx-ink-2, #45554c);
    font-size: 1.05rem;
    line-height: 1.6;
}

.hp-focus-mirror {
    position: absolute;
    top: 0;
    inset-inline-start: -9999px;
    visibility: hidden;
    height: auto;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* ---------- Bar ---------- */
.hp-focus-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    padding: .7rem clamp(1rem, 3vw, 2rem) calc(.7rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--hx-line, #e2d9c8) 80%, transparent);
    background: var(--hpf-bar-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--hx-ink-2, #45554c);
    transition: opacity .35s ease;
}
.hp-focus.is-typing .hp-focus-bar:not(:focus-within) { opacity: .38; }

.hp-focus-stats {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hp-focus-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--hx-quill, #b8894a); opacity: .7; }

.hp-focus-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.hp-focus-btn,
.hp-focus-view {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 40px;
    padding: 0 .95rem;
    border: 1px solid var(--hx-line-2, #cfc3ad);
    border-radius: 999px;
    background: transparent;
    color: var(--hx-ink, #14231c);
    font: 600 .875rem/1 var(--hx-f-body, system-ui, sans-serif);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hp-focus-btn[hidden], .hp-focus-views[hidden] { display: none !important; }
.hp-focus-btn:hover { background: color-mix(in srgb, var(--hx-surface-2, #f6f0e5) 85%, transparent); border-color: var(--hx-quill, #b8894a); }
.hp-focus-btn:focus-visible,
.hp-focus-view:focus-visible { outline: 2px solid var(--hx-quill, #b8894a); outline-offset: 2px; }
.hp-focus-btn[aria-pressed="true"] { background: var(--hx-quill-soft, #f3e8d4); border-color: var(--hx-quill, #b8894a); color: var(--hx-quill-ink, #6e4b1c); }
.hp-focus-btn:disabled { opacity: .5; cursor: not-allowed; }

.hp-focus-run { background: var(--hx-royal, #0f4536); border-color: transparent; color: #f6efe2; }
.hp-focus-run:hover { background: var(--hx-royal-hover, #0b392f); border-color: transparent; }
.hp-focus-run.is-busy .hp-focus-i { animation: hpf-spin 1.1s linear infinite; }
@keyframes hpf-spin { to { transform: rotate(360deg); } }

.hp-focus-i { width: 17px; height: 17px; flex: none; }
.hp-focus-kbd {
    margin-inline-start: .15rem;
    padding: .18rem .38rem;
    border: 1px solid var(--hx-line-2, #cfc3ad);
    border-radius: 6px;
    font: 500 .7rem/1 var(--hx-f-mono, ui-monospace, monospace);
    color: var(--hx-ink-3, #57635b);
}

.hp-focus-views {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--hx-line-2, #cfc3ad);
    border-radius: 999px;
}
.hp-focus-view { min-height: 32px; padding: 0 .85rem; border: 0; }
.hp-focus-view[aria-pressed="true"] { background: var(--hx-ink, #14231c); color: var(--hx-paper, #f4efe6); }

/* A notice from the page (for example "Text copied") repeated above the bar. */
.hp-focus[data-note]::after {
    content: attr(data-note);
    position: absolute;
    inset-inline-start: 50%;
    bottom: 5.25rem;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem);
    padding: .6rem 1rem;
    border-radius: 12px;
    background: var(--hx-ink, #14231c);
    color: var(--hx-paper, #f4efe6);
    font-size: .875rem;
    font-weight: 600;
    box-shadow: var(--hx-shadow, 0 14px 34px -16px rgba(12, 30, 22, .22));
}
[dir="rtl"] .hp-focus[data-note]::after { transform: translateX(50%); }

/* The trigger next to the editor tools, styled like Import file and Try an example. */
body.hp-ui .hp-sheet #hpFocusOpen {
    background: var(--hx-surface) !important;
    color: var(--hx-ink) !important;
    border: 1px solid var(--hx-line-2) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}
body.hp-ui .hp-sheet #hpFocusOpen:hover { border-color: var(--hx-royal) !important; color: var(--hx-royal-ink) !important; }
body.hp-ui .hp-sheet #hpFocusOpen svg { color: currentColor !important; }

@media (max-width: 680px) {
    .hp-focus { --hpf-type: 1.125rem; }
    html body .hp-focus .hp-focus-draft textarea { line-height: 1.68 !important; }
    .hp-focus-stage { padding: 1.25rem 1.1rem 0; }
    .hp-focus-bar { flex-direction: column; align-items: stretch; gap: .55rem; padding-top: .6rem; }
    .hp-focus-stats { justify-content: center; font-size: .82rem; }
    .hp-focus-actions { justify-content: center; flex-wrap: nowrap; }
    .hp-focus-btn { padding: 0 .8rem; }
    .hp-focus-tw > span, .hp-focus-exit > span {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .hp-focus-tw, .hp-focus-exit { width: 42px; padding: 0; justify-content: center; }
    .hp-focus-kbd { display: none; }
    .hp-focus[data-note]::after { bottom: 7.75rem; }
}
@media (pointer: coarse) { .hp-focus-kbd { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .hp-focus, .hp-focus-bar, .hp-focus-btn, .hp-focus-view { transition: none !important; }
    .hp-focus-ambient, .hp-focus-run.is-busy .hp-focus-i { animation: none !important; }
}

/* Document page: Focus sits next to Copy in the result card. */
body.hp-ui .hp-focus-head-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }