/* The Sealed Room — the small things every page shares (js/ui-kit.js): the glowing edge, the password eye, the confirm
   card, copy buttons, back to top, reading progress, skip to content, the light theme, the menu on phones, search,
   the contact button, the loading lock, the pressable button, and the printed page. */

/* ---------- focus and hover: always visible from the keyboard ---------- */
:focus-visible { outline: 2px solid #ff6a3d; outline-offset: 3px; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- the glowing edge (React Bits "Border Glow", rebuilt without React) ---------- */
.glow { isolation: isolate; --ep: 0; --ca: 45deg; --glow-pad: 34px; }
/* on a phone the light reaches only 10px past its card, so it can never make the page wider than the screen */
@media (max-width: 600px) { .glow { --glow-pad: 10px; } }
.glow > .glow-cone, .glow > .glow-light { position: absolute; border-radius: inherit; pointer-events: none; transition: opacity .25s ease-out; }
.glow > .glow-cone { inset: 0; z-index: 2; opacity: calc((var(--ep) - 45) / 55);
  -webkit-mask-image: conic-gradient(from var(--ca) at center, #000 25%, transparent 40%, transparent 60%, #000 75%);
          mask-image: conic-gradient(from var(--ca) at center, #000 25%, transparent 40%, transparent 60%, #000 75%); }
.glow > .glow-cone > i { position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  background: radial-gradient(at 80% 55%, #ff3a20 0, transparent 50%), radial-gradient(at 8% 6%, #ffb27a 0, transparent 50%), radial-gradient(at 51% 4%, #ff6a3d 0, transparent 50%), radial-gradient(at 86% 85%, #ffd2a8 0, transparent 50%), radial-gradient(at 41% 38%, #ff8a50 0, transparent 50%), linear-gradient(#e0603f 0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glow > .glow-light { inset: calc(var(--glow-pad) * -1); z-index: 1; mix-blend-mode: plus-lighter; opacity: calc((var(--ep) - 30) / 70);
  -webkit-mask-image: conic-gradient(from var(--ca) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%);
          mask-image: conic-gradient(from var(--ca) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%); }
.glow > .glow-light > i { position: absolute; inset: var(--glow-pad); border-radius: inherit;
  box-shadow: inset 0 0 0 1px hsl(14 100% 72% / 1), inset 0 0 3px 0 hsl(14 100% 72% / .5), inset 0 0 15px 0 hsl(14 100% 72% / .3), inset 0 0 50px 2px hsl(14 100% 72% / .1),
              0 0 3px 0 hsl(14 100% 72% / .5), 0 0 15px 0 hsl(14 100% 72% / .3), 0 0 25px 2px hsl(14 100% 72% / .2), 0 0 50px 2px hsl(14 100% 72% / .1); }
.glow:not(:hover):not(.glow-sweep) > .glow-cone, .glow:not(:hover):not(.glow-sweep) > .glow-light { opacity: 0; transition: opacity .75s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .glow > .glow-cone, .glow > .glow-light { display: none; } }

/* ---------- the password eye ---------- */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 52px !important; }
.pw-eye { position: absolute; right: 0; top: 0; width: 48px; min-height: 44px; display: grid; place-items: center; background: none; border: 0; color: rgba(233,228,217,.55); cursor: pointer; }
.pw-eye:hover { color: #ff8a5a; }
.pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the confirm card (and its hold-to-confirm button) ---------- */
.ui-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3,2,3,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .25s; }
.ui-modal.on { opacity: 1; }
.ui-card { width: min(420px, 100%); background: linear-gradient(180deg, #16100f, #0b0809); border: 1px solid rgba(233,228,217,.1); border-radius: 18px; padding: 24px 22px 20px; color: #e9e4d9; box-shadow: 0 30px 90px -20px rgba(0,0,0,.9); transform: translateY(10px) scale(.98); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.ui-modal.on .ui-card { transform: none; }
.ui-card h3 { margin: 0 0 8px; font: 700 22px/1.1 var(--font-brand); letter-spacing: -0.03em; text-transform: lowercase; }
.ui-card p { margin: 0 0 18px; color: #9aa0aa; font-size: 14.5px; line-height: 1.55; }
.ui-card .ui-row { display: flex; gap: 10px; flex-wrap: wrap; }
.ui-card button { flex: 1 1 140px; min-height: 48px; border-radius: 12px; font: 700 15px var(--font-brand); letter-spacing: -0.01em; cursor: pointer; border: 1px solid rgba(233,228,217,.18); background: transparent; color: #e9e4d9; }
.ui-card button.yes { background: #e9e4d9; color: #0a0606; border-color: #e9e4d9; }
.ui-card button.yes.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.ui-card button.hold { position: relative; overflow: hidden; }
.ui-card button.hold i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.28); pointer-events: none; }
.ui-card button.hold span { position: relative; }
.ui-card .ui-undo { font: 700 14px var(--font-brand); letter-spacing: -0.01em; color: #ffb27a; }
@media (max-width: 640px) { .ui-modal { align-items: flex-end; padding: 0; } .ui-card { width: 100%; border-radius: 20px 20px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- copy, back to top, contact, reading progress, skip to content ---------- */
.ui-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(233,228,217,.14); background: transparent; color: inherit; font: 700 13px var(--font-brand); letter-spacing: -0.01em; cursor: pointer; opacity: .75; }
.ui-copy:hover { opacity: 1; border-color: #e0603f; color: #ff8a5a; }
.ui-copy.done { color: #9fdcb6; border-color: rgba(120,220,160,.4); opacity: 1; }
.ui-fab { position: fixed; z-index: 60; right: calc(16px + env(safe-area-inset-right, 0px)); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,9,9,.88); border: 1px solid rgba(233,228,217,.16); color: #e9e4d9; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .25s, opacity .25s, border-color .2s, color .2s; text-decoration: none; }
.ui-fab:hover { border-color: #e0603f; color: #ff8a5a; }
.ui-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-top { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); opacity: 0; transform: translateY(12px); pointer-events: none; }
.ui-top.on { opacity: 1; transform: none; pointer-events: auto; }
.ui-contact { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
.ui-progress { position: fixed; z-index: 70; left: 0; top: 0; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff3a20, #ffb27a); box-shadow: 0 0 10px rgba(255,58,32,.6); pointer-events: none; }
.ui-skip { position: absolute; z-index: 130; left: 12px; top: -60px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: #e9e4d9; color: #0a0606; font: 700 14px var(--font-brand); letter-spacing: -0.01em; text-decoration: none; transition: top .2s; }
.ui-skip:focus { top: 12px; }

/* ---------- the header on reading pages: sticky, a menu on phones, search, the theme switch ---------- */
.nav.ui-nav { position: sticky; top: 0; z-index: 50; background: rgba(6,7,11,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(233,228,217,.06); flex-wrap: nowrap; }
.ui-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.ui-links a { color: var(--dim); text-decoration: none; font-size: 13px; padding: 10px 10px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.ui-links a:hover, .ui-links a[aria-current] { color: var(--ink); }
.ui-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; color: var(--dim); cursor: pointer; flex: 0 0 auto; }
.ui-iconbtn:hover { color: var(--ink); background: rgba(233,228,217,.06); }
.ui-iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-menubtn { display: none; }
.ui-menu { position: absolute; right: 12px; top: calc(100% + 6px); min-width: 220px; padding: 8px; border-radius: 14px; background: #120c0b; border: 1px solid rgba(233,228,217,.1); box-shadow: 0 20px 60px rgba(0,0,0,.6); display: none; flex-direction: column; }
.ui-menu.on { display: flex; }
.ui-menu a { color: var(--ink); text-decoration: none; padding: 12px 12px; min-height: 44px; border-radius: 10px; font-size: 15px; }
.ui-menu a:hover { background: rgba(233,228,217,.06); }
@media (max-width: 720px) { .ui-links { display: none; } .ui-links + .ui-iconbtn { margin-left: auto; } .ui-menubtn { display: grid; } .nav.ui-nav .nav-back { display: none; } }

/* search: a small card, never the whole screen */
.ui-search .ui-card { width: min(560px, 100%); padding: 14px; }
.ui-search input { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid rgba(233,228,217,.16); background: rgba(233,228,217,.05); color: #e9e4d9; font: 400 16px var(--font-body); padding: 0 14px; outline: none; }
.ui-search input:focus { border-color: #e0603f; }
.ui-results { list-style: none; margin: 10px 0 0; padding: 0; max-height: min(52vh, 420px); overflow-y: auto; }
.ui-results a { display: block; padding: 11px 12px; border-radius: 10px; color: #e9e4d9; text-decoration: none; }
.ui-results a:hover, .ui-results a.sel { background: rgba(255,106,61,.1); }
.ui-results b { display: block; font: 600 14.5px var(--font-body); }
.ui-results small { display: block; margin-top: 2px; color: #9aa0aa; font-size: 12.5px; line-height: 1.45; }
.ui-results mark { background: rgba(255,106,61,.25); color: inherit; border-radius: 3px; }
.ui-empty { padding: 14px 12px; color: #9aa0aa; font-size: 13.5px; }

/* ---------- the light theme (reading pages only: the rooms are dark on purpose) ---------- */
html[data-theme="light"] { --bg: #f4f0e8; --surface: #ffffff; --raise: #ebe5da; --ink: #1d1712; --dim: #554c43; --faint: #847a6f; --line: #dcd3c6; --ghost: #b8432a; --ghost-dim: #e6b8a8; color-scheme: light; }
html[data-theme="light"] body { background: var(--bg) !important; color: var(--ink); }
html[data-theme="light"] .nav.ui-nav { background: rgba(244,240,232,.86); border-bottom-color: var(--line); }
html[data-theme="light"] .nav svg path, html[data-theme="light"] .nav svg rect, html[data-theme="light"] .top svg path, html[data-theme="light"] .top svg rect { stroke: var(--ink); }
html[data-theme="light"] .ui-fab { background: rgba(255,255,255,.92); color: var(--ink); border-color: var(--line); }
html[data-theme="light"] .ui-menu { background: #fff; border-color: var(--line); }
html[data-theme="light"] .ui-menu a { color: var(--ink); }
html[data-theme="light"] .field input, html[data-theme="light"] .faq details { background: #fff; color: var(--ink); }
html[data-theme="light"] .door-veil, html[data-theme="light"] #door { display: none; }

/* ---------- the loading lock (dqnamo's "logo trace loader": the mark draws itself, then fills) ---------- */
.ui-loader { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; color: rgba(233,228,217,.55); font: 700 14px var(--font-brand); letter-spacing: -0.01em; }
.ui-loader svg { width: 46px; height: 52px; overflow: visible; }
.ui-loader .tr { fill: none; stroke: #e9e4d9; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: uitrace 1.6s cubic-bezier(.6,0,.3,1) infinite; }
.ui-loader .kh { fill: #e0603f; opacity: 0; animation: uikh 1.6s ease-in-out infinite; transform-origin: 120px 155px; }
@keyframes uitrace { 0% { stroke-dashoffset: 520; } 55% { stroke-dashoffset: 0; } 80% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes uikh { 0%, 45% { opacity: 0; transform: scale(.4); } 60% { opacity: 1; transform: scale(1.15); } 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ui-loader .tr { animation: none; stroke-dashoffset: 0; } .ui-loader .kh { animation: none; opacity: 1; } }

/* ---------- the pressable button (dqnamo's "tactile button"): a face, a firm edge, depth that gives ---------- */
.tactile, #ask .go:not(.vsend), #sheet .btn.big { position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 -2px 0 rgba(0,0,0,.18) inset, 0 5px 0 #7a2a17, 0 9px 18px -4px rgba(0,0,0,.6) !important; transform: translateY(0); transition: transform .08s ease, box-shadow .08s ease, background .2s !important; }
.tactile:active:not(:disabled), #ask .go:not(.vsend):active:not(:disabled), #sheet .btn.big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 -1px 0 rgba(0,0,0,.18) inset, 0 1px 0 #7a2a17, 0 3px 8px -2px rgba(0,0,0,.6) !important; }

/* ---------- lists that fade at their edges instead of cutting off ("scroll fade list") ---------- */
.fade-y { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.fade-x { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }

/* ---------- the questions, opening one at a time ---------- */
.faq details { border: 1px solid var(--line); border-radius: 14px; margin: 0 0 10px; background: rgba(13,15,21,.5); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; min-height: 52px; position: relative; font: 600 16px/1.35 var(--font-body); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ghost); border-bottom: 2px solid var(--ghost); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--ghost); }
.faq details > div { padding: 0 18px 16px; color: var(--dim); font-size: 15px; line-height: 1.65; }
.faq details > div p { margin: 0 0 10px; }

/* ---------- printing a page: plain paper, no buttons, links written out ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
  .nav, .ui-fab, .ui-progress, .ui-skip, .ui-modal, .foot, #door, .door-veil, .door-foot, .door-corner, #consent, .rd-x, .rd-seam, .sh-doors, .sh-top, #world, button { display: none !important; }
  .wrap, .rd-page, main { max-width: none !important; padding: 0 !important; background: none !important; }
  a { text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; }
  h1, h2, h3 { page-break-after: avoid; } p, li, details { page-break-inside: avoid; }
  .faq details { border: 0; } .faq details > div { display: block !important; }
}

/* ---------- the contact pop-up (ui-kit.js contact) ---------- */
.ui-pop { position: fixed; z-index: 95; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(132px + env(safe-area-inset-bottom, 0px)); width: min(260px, calc(100vw - 32px)); padding: 16px; display: grid; gap: 8px;
  background: linear-gradient(180deg, #16100f, #0b0809); border: 1px solid rgba(233,228,217,.12); border-radius: 14px; color: #e9e4d9; box-shadow: 0 24px 60px -10px rgba(0,0,0,.85), 0 0 40px -20px rgba(224,96,63,.4); animation: ui-pop-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes ui-pop-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ui-pop b { font: 700 18px/1.1 var(--font-brand); letter-spacing: -0.02em; text-transform: lowercase; }
.ui-pop p { margin: 0 0 6px; font-size: 13.5px; color: #9aa0aa; }
.ui-pop-main, .ui-pop-alt { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font: 600 14px var(--font-body); text-decoration: none; cursor: pointer; }
.ui-pop-main { background: #e9e4d9; color: #0a0606; border: 0; }
.ui-pop-alt { background: transparent; color: #e9e4d9; border: 1px solid rgba(233,228,217,.18); }
.ui-pop-alt:hover { border-color: #e0603f; }
.pm-dot-host { position: fixed; }
.pm-dot-host.pm-has::after { content: attr(data-pm); position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e0603f; color: #0a0606; font: 700 11px/18px var(--font-body); text-align: center; }

/* ---------- message pm (pm-chat.js) ---------- */
.pm-fab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.pm-fab svg { fill: none; }
.pm-chat { position: fixed; z-index: 96; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: linear-gradient(180deg, #140e0e, #090708); border: 1px solid rgba(233,228,217,.12); border-radius: 18px; color: #e9e4d9; box-shadow: 0 30px 90px -20px rgba(0,0,0,.9), 0 0 60px -30px rgba(224,96,63,.45); overflow: hidden; animation: ui-pop-in .25s cubic-bezier(.2,.8,.2,1); }
.pm-chat[hidden] { display: none; }
.pm-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid rgba(233,228,217,.08); }
.pm-title { display: grid; gap: 2px; margin-right: auto; }
.pm-title b { font: 700 20px/1 var(--font-brand); letter-spacing: -0.03em; }
.pm-title span { font-size: 12.5px; color: #9aa0aa; }
.pm-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(233,228,217,.14); background: none; color: #e9e4d9; font-size: 20px; cursor: pointer; }
.pm-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.pm-empty p { margin: auto 0; color: #9aa0aa; font-size: 14px; line-height: 1.55; text-align: center; padding: 30px 10px; }
.pm-bubble { max-width: 84%; padding: 10px 12px 8px; border-radius: 14px; }
.pm-bubble p { margin: 0 0 4px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.pm-bubble time { font-size: 11px; color: #9aa0aa; }
.pm-bubble.me { align-self: flex-end; background: #e9e4d9; color: #0a0606; border-bottom-right-radius: 4px; }
.pm-bubble.me time { color: #5a5550; }
.pm-bubble.them { align-self: flex-start; background: rgba(224,96,63,.12); border: 1px solid rgba(224,96,63,.3); border-bottom-left-radius: 4px; }
.pm-msg { padding: 0 16px; color: #ff8a6a; font-size: 13px; }
.pm-msg:empty { display: none; }
.pm-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(233,228,217,.08); }
.pm-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 140px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(233,228,217,.14); background: #0d0f15; color: #e9e4d9; font: 15px/1.4 var(--font-body); }
.pm-form textarea:focus { outline: none; border-color: #e0603f; }
.pm-send { min-width: 64px; border-radius: 12px; border: 0; background: #e9e4d9; color: #0a0606; font: 700 14px var(--font-body); cursor: pointer; }
@media (max-width: 640px) { .pm-chat { right: 0; left: 0; bottom: 0; width: 100%; height: 86dvh; border-radius: 20px 20px 0 0; } }