/* cyrillic-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/8e9860b6e62d6359-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: '__Inter_f367f3';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: '__Inter_Fallback_f367f3';src: local("Arial");ascent-override: 90.49%;descent-override: 22.56%;line-gap-override: 0.00%;size-adjust: 107.06%
}.__className_f367f3 {font-family: '__Inter_f367f3', '__Inter_Fallback_f367f3';font-style: normal
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* STAGE-24 — Pulsing green Shield-lock badge keyframe.
   Lives in the global stylesheet so the keyframe is available on
   BOTH the in-app Sanctuary footer (defined inside AethelWrite.jsx)
   AND the /billing trust banner, which doesn't load the AethelWrite
   <style> island.  Slow 2.4-s cycle so the page never feels twitchy.
   Honours `prefers-reduced-motion` automatically since `animation`
   degrades to none under that media query in app-level resets.    */
@keyframes aw-shield-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55), 0 0 0 0 rgba(74, 222, 128, 0.20); transform: scale(1); }
  50%      { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18), 0 0 12px 2px rgba(74, 222, 128, 0.35); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  /* Disable the lock pulse for visitors who prefer reduced motion. */
  [style*="aw-shield-pulse"] { animation: none !important; }
}

html, body {
  margin: 0;
  padding: 0;
  /* Theme-aware: reads --aw-bg/--aw-txt from the nearest .theme-* ancestor.
     Fallback resolves to a neutral mid-grey only when no theme is mounted
     yet (pre-hydration), preventing the dark-bar flash that briefly
     appeared at the viewport edge in light mode. */
  background: var(--aw-bg, #1a1a1a);
  color: var(--aw-txt, #EDE5D5);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme tokens defined on :root so html/body inherit them before the
   in-app .theme-* class mounts. Keeps body background in sync with the
   active theme without a flash. */
html.theme-dark, body.theme-dark {
  background: #080808;
}
html.theme-light, body.theme-light {
  background: #F9F6EF;
}

/* Scrollbar styling — theme-aware */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--aw-s2, #141414);
}
::-webkit-scrollbar-thumb {
  background: var(--aw-bdr2, #2C2C2C);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--aw-tmid, #8A7A6A);
}

/* ProseMirror editor styles — all colours via CSS vars.
   font-family ends with the full Noto safety net so Turkish (ğ ş ı İ),
   Greek, Cyrillic, Arabic, Hebrew and CJK characters render correctly
   even though Playfair/Georgia alone may not cover them. */
.ProseMirror {
  outline: none;
  padding: 20px 16px;
  min-height: 400px;
  caret-color: var(--aw-gold, #FFB800);
  color: var(--aw-txt, #EDE5D5);
  font-family: "Playfair Display", Georgia, "Noto Serif", "Noto Sans", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", serif;
  font-size: 14px;
  line-height: 1.85;
}
.ProseMirror p { margin: 0 0 0.85em; }
.ProseMirror h1 { font-size: 1.5em; font-weight: 700; margin: 1.2em 0 0.5em; color: var(--aw-ghl, #FFD060); letter-spacing: -0.01em; }
.ProseMirror h2 { font-size: 1.2em; font-weight: 600; margin: 1em 0 0.4em; color: var(--aw-gold, #FFB800); }
.ProseMirror h3 { font-size: 1.05em; font-weight: 600; margin: 0.8em 0 0.3em; color: var(--aw-tmid, #8A7A6A); }
.ProseMirror blockquote { border-left: 2px solid var(--aw-gdim, #6A4800); margin: 0.8em 0; padding: 0.2em 1em; color: var(--aw-tsec, #8A7A6A); font-style: italic; }
.ProseMirror ul, .ProseMirror ol { padding-left: 1.5em; margin: 0.4em 0; }
.ProseMirror li { margin-bottom: 0.2em; }
.ProseMirror code { background: var(--aw-s2, #141414); border: 1px solid var(--aw-bdr, #222); border-radius: 3px; padding: 0.1em 0.35em; font-family: ui-monospace, "Cascadia Code", "Consolas", "Noto Sans Mono", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", monospace; font-size: 0.86em; color: var(--aw-gold, #FFB800); }
.ProseMirror pre { background: var(--aw-s2, #141414); border: 1px solid var(--aw-bdr, #222); border-radius: 5px; padding: 12px 14px; overflow-x: auto; }
.ProseMirror hr { border: none; border-top: 1px solid var(--aw-bdr, #2C2C2C); margin: 1.5em 0; }
.ProseMirror p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; color: var(--aw-tsec, #5A5040); pointer-events: none; height: 0; }
.ProseMirror ::selection { background: rgba(255, 184, 0, 0.22); }
.ProseMirror u { text-decoration: underline; text-underline-offset: 3px; }
.ProseMirror s { text-decoration: line-through; color: var(--aw-tsec, #8A7A6A); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ─── Theme tokens ──────────────────────────────────────────── */
.theme-dark {
  --aw-bg:#080808; --aw-sur:#0E0E0E; --aw-s2:#141414; --aw-s3:#1C1C1C;
  --aw-bdr:#222222; --aw-bdr2:#2C2C2C;
  --aw-gold:#FFB800; --aw-gdim:#6A4800; --aw-gbg:#110E00; --aw-ghl:#FFD060;
  --aw-txt:#EDE5D5; --aw-tsec:#5A5040; --aw-tmid:#8A7A6A; --aw-err:#A32D2D;
  --aw-page-shadow: 0 2px 4px rgba(0,0,0,.15),0 8px 32px rgba(0,0,0,.4),2px 0 3px rgba(0,0,0,.06);
}
.theme-light {
  --aw-bg:#F9F6EF; --aw-sur:#F2EDE6; --aw-s2:#EBE5DD; --aw-s3:#E3DDD5;
  --aw-bdr:#D5CFC7; --aw-bdr2:#C5BFB7;
  --aw-gold:#B8860B; --aw-gdim:#8B6500; --aw-gbg:#EDE5CC; --aw-ghl:#9A6800;
  --aw-txt:#2A1E10; --aw-tsec:#7A6A5A; --aw-tmid:#5A4A3A; --aw-err:#A32D2D;
  --aw-page-shadow: 0 1px 3px rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.1),1px 0 2px rgba(0,0,0,.04);
}

/* ─── Zen layout — sidebar + preview collapse ───────────────── */
.layout-zen .aw-preview-panel {
  width: 0 !important;
  overflow: hidden !important;
}

/* ─── Hemingway / focus layout — full-screen distraction-free ──
   Hides every layout descendant of the root EXCEPT the editor
   scroll container.  Implementation strategy:

     1.  All direct children of the root collapse, except <main>,
         <style>, and the floating focus-overlay (which carries the
         exit + sound buttons + word counter).
     2.  Inside <main>, only the editor flex container survives
         (it carries data-focus-keep="editor"); the topbar and any
         other panel collapses.
     3.  Inside the editor flex container, only the scroll element
         (data-focus-keep="scroll") survives — the toolbar, media
         bar, and bubble menu hide.
     4.  The ProseMirror element gets a wide centered "manuscript
         page" treatment so the writer feels like they're at a
         single physical sheet.

   No transforms, no portals, no remount.  The editor instance
   keeps the same DOM node, so the cursor/selection is preserved
   when entering and leaving focus mode. */
.layout-focus > *:not(main):not(style):not(.aw-focus-overlay) { display: none !important; }
.layout-focus main { position: fixed !important; inset: 0 !important; z-index: 99980 !important; border: none !important; background: var(--aw-bg, #080808) !important; }
.layout-focus main > *:not([data-focus-keep="editor"]):not(style) { display: none !important; }
.layout-focus main [data-focus-keep="editor"] { display: flex !important; height: 100vh !important; flex: 1 1 auto !important; }
.layout-focus main [data-focus-keep="editor"] > *:not([data-focus-keep="scroll"]):not(style) { display: none !important; }
.layout-focus main [data-focus-keep="scroll"] { background: var(--aw-bg, #080808) !important; }
.layout-focus .ProseMirror {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 88px 28px 120px !important;
  font-size: 18px !important;
  line-height: 1.95 !important;
  caret-color: var(--aw-gold, #FFB800);
}
.theme-light.layout-focus main { background: var(--aw-bg, #F9F6EF) !important; }
.theme-light.layout-focus main [data-focus-keep="scroll"] { background: var(--aw-bg, #F9F6EF) !important; }

/* ─── A11y — keyboard focus ring — DEBUG-LOUD ────────────────
   Temporarily ultra-visible (4px solid #FFD700 + glow) so it's
   trivial to see exactly where Tab focus lands and where it
   "dies". `outline-offset: 2px` lifts it off the element so
   it's visible even on dense rows. Once the tab-flow bug is
   confirmed solved we can dial this back to the prior subtle
   box-shadow ring. */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 4px solid #FFD700 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(255, 215, 0, 0.35) !important;
  transition: outline-color 80ms ease-out, box-shadow 80ms ease-out;
}
.theme-light button:focus-visible,
.theme-light [role="button"]:focus-visible,
.theme-light input:focus-visible,
.theme-light textarea:focus-visible,
.theme-light select:focus-visible,
.theme-light a:focus-visible,
.theme-light [tabindex]:focus-visible {
  outline: 4px solid #B8860B !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(184, 134, 11, 0.35) !important;
}

/* ─── A11y — Skip-to-content link ─────────────────────────────
   Hidden visually until it receives keyboard focus, then flies
   to the top center of the viewport with the gold accent. */
.aw-skip-link {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%) translateY(-200%);
  background: var(--aw-gbg, #110E00);
  color: var(--aw-gold, #FFB800);
  border: 1px solid var(--aw-gold, #FFB800);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  z-index: 99999;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.aw-skip-link:focus,
.aw-skip-link:focus-visible {
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  outline: none;
  box-shadow:
    0 0 0 2px var(--aw-gold, #FFB800),
    0 4px 16px rgba(255, 184, 0, 0.45);
}

/* ─── A11y — Screen-reader-only utility ───────────────────────
   Removes content from the visual layout while keeping it in
   the accessibility tree, so live regions can announce status
   without occupying screen space. */
.aw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}