/* ==========================================================================
   HumanProse writing tools
   1. Input language (write in Arabic, get natural English)
   2. Show changes (word diff on the editor and the document page)
   3. Share links (panel on the document page, public read-only page)
   Uses the --hx-* tokens from hp-design.css, so light, dark and RTL follow.
   ========================================================================== */

/* ---------- 1. Input language ---------- */
body.hp-ui .hp-srclang-wrap {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px 20px 12px;
    border-bottom: 1px solid var(--hx-line);
    background: var(--hx-surface);
}
@media (min-width: 640px) { body.hp-ui .hp-srclang-wrap { padding-inline: 24px; } }
body.hp-ui .hp-srclang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
body.hp-ui .hp-srclang-set { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
body.hp-ui .hp-srclang-legend { float: left; padding: 0; font-size: .78rem; font-weight: 700; color: var(--hx-ink-2); }
[dir="rtl"] body.hp-ui .hp-srclang-legend { float: right; }
body.hp-ui .hp-srclang-switch {
    display: inline-flex; padding: 3px; gap: 2px;
    border: 1px solid var(--hx-line-2); border-radius: 999px; background: var(--hx-surface-2);
}
body.hp-ui .hp-srclang-option { position: relative; display: inline-flex; cursor: pointer; }
body.hp-ui .hp-srclang-option input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer;
}
body.hp-ui .hp-srclang-option span {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px;
    font: 600 .82rem/1.2 var(--hx-f-body); color: var(--hx-ink-2); white-space: nowrap;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body.hp-ui .hp-srclang-option:hover span { color: var(--hx-ink); }
body.hp-ui .hp-srclang-option input:checked + span {
    background: var(--hx-royal); color: #fff;
    box-shadow: 0 6px 14px -8px rgba(15, 69, 54, .9);
}
body.hp-ui .hp-srclang-option input:focus-visible + span { outline: 2px solid var(--hx-quill); outline-offset: 2px; }
body.hp-ui .hp-srclang-note {
    margin: 0; flex: 1 1 260px; min-width: 0;
    font-size: .8rem; line-height: 1.45; color: var(--hx-quill-ink);
}
body.hp-ui .hp-srclang-note[hidden] { display: none; }

/* The suggestion chip */
body.hp-ui .hp-srclang-hint { display: inline-flex; align-self: flex-start; align-items: stretch; max-width: 100%; border: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent); border-radius: 999px; background: var(--hx-quill-soft); overflow: hidden; }
body.hp-ui .hp-srclang-hint[hidden] { display: none; }
body.hp-ui .hp-srclang-hint button { border: 0; background: none; cursor: pointer; color: var(--hx-quill-ink); }
body.hp-ui .hp-srclang-hint-apply {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 6px 7px 12px;
    font: 700 .8rem/1.3 var(--hx-f-body); text-align: start;
}
[dir="rtl"] body.hp-ui .hp-srclang-hint-apply { padding: 7px 12px 7px 6px; }
body.hp-ui .hp-srclang-hint-apply:hover span { text-decoration: underline; text-underline-offset: 3px; }
body.hp-ui .hp-srclang-hint-dismiss { display: grid; place-items: center; width: 32px; flex: none; }
body.hp-ui .hp-srclang-hint-dismiss:hover { color: var(--hx-ink); }
body.hp-ui .hp-srclang-hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-srclang-hint-dismiss svg { width: 13px; height: 13px; stroke-width: 2.4; }
body.hp-ui .hp-srclang-hint button:focus-visible { outline: 2px solid var(--hx-royal); outline-offset: -2px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
    body.hp-ui .hp-srclang-hint:not([hidden]) { animation: hpSrclangIn .22s var(--hx-ease, ease) both; }
}
@keyframes hpSrclangIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* The editor while writing in Arabic */
html body.hp-ui #inputText.hp-input-ar {
    direction: rtl; text-align: right;
    font-family: "HP Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif !important;
    font-size: 1.1rem !important; line-height: 1.95 !important;
}
html body.hp-ui #inputText.hp-input-ar::placeholder { font-family: "HP Arabic", "Segoe UI", Tahoma, sans-serif; }

/* ---------- 2. Show changes ---------- */
html body.hp-ui .hp-is-hidden { display: none !important; }
body.hp-ui .hp-diff-panel[hidden],
body.hp-ui [data-hp-diff-pane][hidden] { display: none !important; }
body.hp-ui .hp-diff-summary {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px;
    padding: 10px 14px; border: 1px solid var(--hx-line); border-radius: 14px;
    background: var(--hx-surface-2); color: var(--hx-ink-2); font-size: .82rem; line-height: 1.4;
}
body.hp-ui .hp-sheet .hp-diff-summary { margin: 18px 20px 0; }
@media (min-width: 640px) { body.hp-ui .hp-sheet .hp-diff-summary { margin-inline: 28px; } }
body.hp-ui .hp-diff-stats { font-weight: 700; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
body.hp-ui .hp-diff-legend { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; color: var(--hx-ink-2); }
body.hp-ui .hp-diff-key { display: inline-flex; align-items: center; gap: 6px; }
body.hp-ui .hp-diff-key::before { content: ""; width: 20px; height: 12px; border-radius: 3px; flex: none; }
body.hp-ui .hp-diff-key-ins::before {
    background: color-mix(in srgb, var(--hx-quill) 26%, transparent);
    box-shadow: inset 0 -2px 0 var(--hx-quill);
}
body.hp-ui .hp-diff-key-del::before {
    background: linear-gradient(transparent 44%, var(--hx-danger) 44%, var(--hx-danger) 60%, transparent 60%),
        color-mix(in srgb, var(--hx-danger) 8%, transparent);
}
body.hp-ui .hp-sheet .hp-diff-body { min-height: 330px; padding: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (min-width: 640px) { body.hp-ui .hp-sheet .hp-diff-body { padding: 28px 32px; } }

/* Inserted words: brass tint and underline. Removed words: struck through. Never colour alone. */
html body.hp-ui ins.hp-diff-ins,
html body.hp-ui .hp-sheet .text-editor-output ins.hp-diff-ins {
    background: color-mix(in srgb, var(--hx-quill) 24%, transparent) !important;
    color: inherit !important;
    text-decoration: underline !important;
    text-decoration-color: var(--hx-quill) !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: .2em;
    border-radius: 3px;
    padding: 0 .06em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html body.hp-ui del.hp-diff-del,
html body.hp-ui .hp-sheet .text-editor-output del.hp-diff-del {
    background: color-mix(in srgb, var(--hx-danger) 8%, transparent);
    color: var(--hx-ink-3) !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--hx-danger) !important;
    text-decoration-thickness: 1.5px !important;
    border-radius: 3px;
    padding: 0 .06em;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
body.hp-ui .hp-diff-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;
}
@media (forced-colors: active) {
    html body.hp-ui ins.hp-diff-ins { background: Mark !important; color: MarkText !important; }
}

/* Document page: the bar above the two panes */
body.hp-ui .hp-diff-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 18px 0 16px; padding: 10px 12px 10px 10px;
    border: 1px solid var(--hx-line); border-radius: 18px; background: var(--hx-surface);
    color: var(--hx-ink-2); font-size: .86rem;
}
[dir="rtl"] body.hp-ui .hp-diff-bar { padding: 10px 10px 10px 12px; }
body.hp-ui .hp-diff-bar .hp-diff-legend { margin-inline-start: auto; }
body.hp-ui .hp-diff-bar .hp-diff-legend[hidden] { display: none; }
body.hp-ui .hp-diff-note { color: var(--hx-ink-3); font-size: .84rem; }
body.hp-ui .hp-diff-switch { gap: 10px !important; }
body.hp-ui .hp-switch-track {
    position: relative; display: inline-block; width: 34px; height: 20px; flex: none; border-radius: 999px;
    background: var(--hx-line-2); transition: background-color .2s ease;
}
body.hp-ui .hp-switch-thumb {
    position: absolute; top: 3px; inset-inline-start: 3px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: inset-inline-start .2s var(--hx-ease, ease);
}
body.hp-ui .hp-diff-switch[aria-checked="true"] .hp-switch-track { background: var(--hx-royal); }
body.hp-ui .hp-diff-switch[aria-checked="true"] .hp-switch-thumb { inset-inline-start: 17px; }
@media (prefers-reduced-motion: reduce) {
    body.hp-ui .hp-switch-track, body.hp-ui .hp-switch-thumb { transition: none; }
}
body.hp-ui.hp-app .hp-diff-pane { white-space: pre-wrap; }
body.hp-ui.hp-app .result-card .hp-diff-pane { font-family: var(--hx-f-display) !important; font-size: 1.35rem !important; line-height: 1.5 !important; }
body.hp-ui .summary-chip-translation { border-color: color-mix(in srgb, var(--hx-quill) 55%, transparent) !important; background: var(--hx-quill-soft) !important; color: var(--hx-quill-ink) !important; }

/* Toggle unavailable for translations: still focusable so the reason can be read. */
body.hp-ui [data-hp-diff-toggle] { position: relative; }
body.hp-ui [data-hp-diff-toggle][aria-disabled="true"],
body.hp-ui .hp-sheet .result-action-row [data-hp-diff-toggle][aria-disabled="true"] { cursor: not-allowed; color: var(--hx-ink-3) !important; border-style: dashed !important; }
body.hp-ui .hp-sheet [data-hp-diff-toggle][aria-pressed="true"] { border-color: var(--hx-quill) !important; color: var(--hx-quill-ink) !important; background: var(--hx-quill-soft) !important; }
body.hp-ui [data-hp-diff-toggle][data-tooltip]:is(:hover, :focus-visible)::after {
    content: attr(data-tooltip);
    position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    padding: 6px 10px; border-radius: 8px; white-space: nowrap; pointer-events: none;
    background: var(--hx-ink); color: var(--hx-paper); font: 600 .75rem/1.3 var(--hx-f-body); text-transform: none; letter-spacing: 0;
    box-shadow: var(--hx-shadow);
}

/* ---------- 3. Share links: the panel on the document page ---------- */
body.hp-ui .hp-share-panel[hidden] { display: none !important; }
body.hp-ui .hp-share-panel {
    display: grid; gap: 18px; margin-top: 18px; padding: clamp(18px, 3vw, 26px);
    border: 1px solid color-mix(in srgb, var(--hx-quill) 45%, var(--hx-line)) !important;
    background: linear-gradient(180deg, var(--hx-quill-soft), var(--hx-surface) 70%) !important;
}
@media (min-width: 900px) { body.hp-ui .hp-share-panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: start; column-gap: 32px; } }
body.hp-ui .hp-share-intro h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--hx-ink); }
body.hp-ui .hp-share-intro .section-copy { margin: 0; color: var(--hx-ink-2); line-height: 1.55; }
body.hp-ui .hp-share-label { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hx-quill-ink); }
html[lang="ar"] body.hp-ui .hp-share-label { letter-spacing: 0; text-transform: none; font-size: .86rem; }
body.hp-ui .hp-share-link-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
body.hp-ui .hp-share-input {
    flex: 1 1 280px; min-width: 0; height: 46px; direction: ltr; text-align: left;
    font-family: var(--hx-f-mono) !important; font-size: .82rem !important; color: var(--hx-ink) !important;
    background: var(--hx-surface) !important;
}
body.hp-ui .hp-share-state { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; padding-top: 14px; border-top: 1px dashed var(--hx-line-2); }
@media (min-width: 900px) { body.hp-ui .hp-share-state { grid-column: 2; } }
body.hp-ui .hp-share-state p { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--hx-ink-2); font-size: .9rem; }
body.hp-ui .hp-share-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hx-ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hx-ok) 22%, transparent); flex: none; }
body.hp-ui .hp-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.hp-ui .hp-share-actions form { margin: 0; }
body.hp-ui .hp-share-create { display: grid; gap: 10px; justify-items: start; }
body.hp-ui .hp-share-check { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--hx-ink); cursor: pointer; }
body.hp-ui .hp-share-check input { width: 18px; height: 18px; accent-color: var(--hx-royal); margin: 0; }
body.hp-ui .hp-share-hint { margin: -4px 0 4px; color: var(--hx-ink-3); font-size: .85rem; }
body.hp-ui .hp-share-flash { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--hx-ok-soft); color: var(--hx-ok); font-weight: 600; font-size: .9rem; }
@media (min-width: 900px) { body.hp-ui .hp-share-flash { grid-column: 1 / -1; } }

/* ---------- 3. Share links: the public read-only page ---------- */
body.hp-ui.hp-shared { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--hx-paper) !important; }
body.hp-ui .hp-shared-cta > p { margin: 0 !important; }
body.hp-ui .hp-shared-skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--hx-royal); color: #fff; font-weight: 700; text-decoration: none; }
body.hp-ui .hp-shared-skip:focus { top: 12px; }
body.hp-ui .hp-shared-band {
    position: relative; overflow: hidden; color: var(--hx-on-stage);
    padding: 0 16px clamp(92px, 12vw, 128px);
    background:
        radial-gradient(120% 90% at 85% -10%, rgba(217, 178, 119, .22), transparent 55%),
        radial-gradient(90% 70% at 0% 100%, rgba(35, 107, 82, .55), transparent 60%),
        linear-gradient(160deg, var(--hx-stage-2), var(--hx-stage) 75%);
}
body.hp-ui .hp-shared-band::after {
    content: ""; position: absolute; inset: auto -10% -46% 38%; height: 120%; border-radius: 50%;
    border: 1px solid var(--hx-stage-line); pointer-events: none;
}
body.hp-ui .hp-shared-bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(980px, 100%); margin: 0 auto; padding: 18px 0; }
body.hp-ui .hp-shared-brand { display: inline-flex; border-radius: 10px; }
body.hp-ui .hp-shared-brand img { width: 160px; height: auto; display: block; }
body.hp-ui .hp-shared-bar .hp-switch { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; color: var(--hx-on-stage) !important; }
body.hp-ui .hp-shared-hero { position: relative; z-index: 1; width: min(980px, 100%); margin: clamp(18px, 5vw, 44px) auto 0; }
body.hp-ui .hp-shared-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--hx-cream); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
html[lang="ar"] body.hp-ui .hp-shared-eyebrow { letter-spacing: 0; font-size: .9rem; }
body.hp-ui .hp-shared-eyebrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-shared-title {
    margin: 0; max-width: 22ch; color: #fbf6ec !important;
    font-family: var(--hx-f-display) !important; font-weight: 400 !important;
    font-size: clamp(2.1rem, 6vw, 3.9rem) !important; line-height: 1.04 !important; letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
body.hp-ui .hp-shared-title:lang(ar), body.hp-ui .hp-shared-title[dir="rtl"] { line-height: 1.3 !important; }
body.hp-ui .hp-shared-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
body.hp-ui .hp-shared-meta li {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); color: var(--hx-on-stage-2); font-size: .82rem; font-weight: 600;
}
body.hp-ui .hp-shared-meta strong { color: #fbf6ec; font-weight: 700; font-variant-numeric: tabular-nums; }
body.hp-ui .hp-shared-meta time { color: #fbf6ec; }
body.hp-ui .hp-shared-meta .hp-shared-meta-chip { border-color: rgba(217, 178, 119, .45); color: var(--hx-cream); }

body.hp-ui .hp-shared-main {
    position: relative; z-index: 2; flex: 1 0 auto; display: grid; gap: 22px; align-content: start;
    width: min(980px, calc(100% - 32px)); margin: calc(-1 * clamp(64px, 9vw, 92px)) auto 0;
}
body.hp-ui .hp-shared-sheet {
    padding: clamp(20px, 4vw, 44px) clamp(20px, 5vw, 56px) clamp(26px, 4vw, 48px);
    border: 1px solid var(--hx-line); border-radius: 26px; background: var(--hx-surface);
    box-shadow: var(--hx-shadow-lg);
}
body.hp-ui .hp-shared-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; margin-bottom: clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--hx-line); }
body.hp-ui .hp-shared-label { margin: 0; font-size: .78rem !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--hx-quill-ink) !important; }
html[lang="ar"] body.hp-ui .hp-shared-label { letter-spacing: 0 !important; font-size: .92rem !important; }
body.hp-ui .hp-shared-copy { padding: 10px 16px !important; font-size: .86rem !important; }
body.hp-ui .hp-shared-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.hp-ui .hp-shared-copy.is-copied { border-color: var(--hx-ok) !important; color: var(--hx-ok) !important; }
body.hp-ui .hp-shared-text {
    white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hx-ink);
    font-family: var(--hx-f-display); font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.6; max-width: 68ch;
}
body.hp-ui .hp-shared-text:focus { outline: none; }
body.hp-ui .hp-shared-text[dir="rtl"], body.hp-ui .hp-shared-original-text:lang(ar) { font-family: var(--hx-f-body); }
body.hp-ui .hp-shared-original { margin-top: clamp(22px, 4vw, 36px); border: 1px solid var(--hx-line); border-radius: 16px; background: var(--hx-surface-2); }
body.hp-ui .hp-shared-original summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px;
    cursor: pointer; list-style: none; font-weight: 700; color: var(--hx-ink-2);
}
body.hp-ui .hp-shared-original summary::-webkit-details-marker { display: none; }
body.hp-ui .hp-shared-original summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .2s ease; }
body.hp-ui .hp-shared-original[open] summary svg { transform: rotate(180deg); }
body.hp-ui .hp-shared-original-text { padding: 0 18px 18px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hx-ink-2); line-height: 1.75; }

body.hp-ui .hp-shared-cta {
    display: grid; gap: 10px; justify-items: start; padding: clamp(22px, 4vw, 34px) clamp(20px, 5vw, 56px);
    border-radius: 24px; border: 1px solid var(--hx-line); background: var(--hx-royal-soft);
}
@media (min-width: 760px) {
    body.hp-ui .hp-shared-cta { grid-template-columns: 1fr auto; align-items: center; column-gap: 28px; }
    body.hp-ui .hp-shared-cta .hp-btn { grid-column: 2; grid-row: 1 / span 2; }
}
body.hp-ui .hp-shared-cta-title { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem) !important; color: var(--hx-ink); line-height: 1.1 !important; }
body.hp-ui .hp-shared-cta-title em { color: var(--hx-quill-ink); font-style: italic; }
html[lang="ar"] body.hp-ui .hp-shared-cta-title em { font-style: normal; }
body.hp-ui .hp-shared-cta-copy { margin: 0; max-width: 54ch; color: var(--hx-ink-2); line-height: 1.55; }
body.hp-ui .hp-shared-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] body.hp-ui .hp-shared-arrow { transform: scaleX(-1); }
body.hp-ui .hp-shared-foot { width: min(980px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 36px; color: var(--hx-ink-3); font-size: .85rem; text-align: center; }
body.hp-ui .hp-shared-foot p { margin: 0; }
@media print {
    body.hp-ui .hp-shared-band, body.hp-ui .hp-shared-cta, body.hp-ui .hp-shared-copy, body.hp-ui .hp-shared-foot { display: none !important; }
    body.hp-ui .hp-shared-main { margin-top: 0; }
    body.hp-ui .hp-shared-sheet { box-shadow: none; border: 0; }
}