@import url("/interior-ui.css");
/* Navigation guide: night blue actions, compact relief and consistent states. */
@font-face{font-family:TioNav;src:url('/assets/GoogleSans.woff2') format('woff2');font-display:swap}
@font-face{font-family:TioNotice;src:url('/assets/Inter.woff2') format('woff2');font-display:swap}

/* A mandatory status notice keeps its existing interaction and safe-area position. */
html body #active-window-notice{padding:24px;border:0;border-radius:12px;background:#f4f0e8;color:#35383c;text-align:left;font:14px/1.5 TioNotice,Arial,sans-serif;box-shadow:-4px -4px 10px #fffefbea,5px 7px 12px #49382f38,inset 1px 1px 2px #fffefbb3}
html body #active-window-notice p{margin:0;overflow-wrap:anywhere}
html body #active-window-notice button{display:block;min-height:32px;max-width:100%;margin:24px auto 0;padding:6px 10px;border:1px solid transparent;border-radius:6px;background:#192c46;color:#f4f0e8;font:500 13px/18px TioNav,Arial,sans-serif;box-shadow:0 2px 3px #07111e66;transition:background .15s,box-shadow .15s,transform .15s}
html body #active-window-notice button[hidden]{display:none}
html body #active-window-notice button:hover:not(:disabled){background:#506b89}
html body #active-window-notice button:active:not(:disabled){background:#405a78;box-shadow:inset 0 2px 3px #07111e99;transform:translateY(1px)}
html body #active-window-notice button:focus-visible{outline:1px solid #607f9e;outline-offset:2px}
html body #active-window-notice button:disabled{opacity:.5;cursor:default;transform:none}

/* Desktop perimeter controls share the reader's effective theme.
   Geometry/placement stays with each section; the settings gear uses the 32px icon. */
@media(min-width:701px){
 html body :is(#fullscreen,nav.reader-controls button,#album-mark-tools button,#desk-return,#morgan-book,#tio-account-controls .settings-gear){background:var(--corner-bg);color:var(--corner-ink);border-color:transparent;text-shadow:none;filter:none;box-shadow:0 2px 3px #07111e66;transition:background .15s,box-shadow .15s,transform .15s}
 html body :is(#fullscreen,nav.reader-controls button,#album-mark-tools button,#desk-return,#morgan-book,#tio-account-controls .settings-gear):hover:not(:disabled){background:var(--corner-hover);filter:none;box-shadow:0 2px 3px #07111e66}
 html body :is(#fullscreen,nav.reader-controls button,#album-mark-tools button,#desk-return,#morgan-book,#tio-account-controls .settings-gear):active:not(:disabled){background:var(--corner-active);box-shadow:inset 0 2px 3px #07111e99}
 html body :is(#fullscreen,nav.reader-controls button,#album-mark-tools button,#desk-return,#morgan-book,#tio-account-controls .settings-gear):focus-visible{outline:1px solid #607f9e;outline-offset:2px}
 html body nav.reader-controls #marked,html body #album-mark-tools #album-mark-jump{color:#ef5268}
 html body #tio-account-controls{top:var(--top-control-top)}
 html body #tio-account-controls .settings-gear{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;padding:6px;border:0;border-radius:6px}
 html body #tio-account-controls .settings-gear::before{content:'';position:absolute;inset:-6px}
 html body #tio-account-controls .settings-gear svg{width:18px;height:18px}
}

/* Three equally valid starting actions; none is preselected or visually preferred. */
html body[data-screen=home] #cover .choices button{background:#192c46;color:#f4f0e8;border-color:transparent;box-shadow:0 2px 3px #07111e66;filter:none}
html body[data-screen=home] #cover .choices button:hover:not(:disabled){background:#506b89;box-shadow:0 2px 3px #07111e66;filter:none}
html body[data-screen=home] #cover .choices button:active:not(:disabled){background:#405a78;box-shadow:inset 0 2px 3px #07111e99;transform:translateY(1px)}
html body[data-screen=home] #cover .choices button:focus-visible{outline:1px solid #607f9e;outline-offset:2px}
@media(prefers-reduced-motion:reduce){html body #active-window-notice button,html body[data-screen=home] #cover .choices button{transition:none}}

/* Notebook mobile: perimeter actions keep the theme in both menu states. */
@media(max-width:700px){
 html body :is(#desk-return,#mobile-menu){background:var(--corner-bg);color:var(--corner-ink);border-color:transparent;text-shadow:none;filter:none;box-shadow:0 2px 3px #07111e66}
 @media(hover:hover){html body :is(#desk-return,#mobile-menu):hover:not(:disabled){background:var(--corner-hover)}}
 html body :is(#desk-return,#mobile-menu):active:not(:disabled){background:var(--corner-active);box-shadow:inset 0 2px 3px #07111e99}
 html body :is(#desk-return,#mobile-menu):focus-visible{outline:1px solid #607f9e;outline-offset:2px}
}

/* System theme is the default; scene previews override only perimeter controls. */
:root{--corner-bg:#f4f0e8;--corner-ink:#192c46;--corner-hover:#fcfaf5;--corner-active:#dce3ea}
@media(prefers-color-scheme:dark){:root{--corner-bg:#192c46;--corner-ink:#f4f0e8;--corner-hover:#405a78;--corner-active:#304762}}
body[data-ui-theme="light"],#tio-account-controls[data-theme="light"]{--corner-bg:#f4f0e8;--corner-ink:#192c46;--corner-hover:#fcfaf5;--corner-active:#dce3ea}
body[data-ui-theme="dark"],#tio-account-controls[data-theme="dark"]{--corner-bg:#192c46;--corner-ink:#f4f0e8;--corner-hover:#405a78;--corner-active:#304762}
html body :is(#fullscreen,[data-site-fullscreen],nav.reader-controls button,#album-mark-tools button,#back-to-desk,#desk-return,#mobile-menu,#mobile-finish,#morgan-book,#tio-account-controls .settings-gear){background:var(--corner-bg);color:var(--corner-ink);border-color:transparent;text-shadow:none;filter:none}
@media(hover:hover){html body :is(#fullscreen,[data-site-fullscreen],nav.reader-controls button,#album-mark-tools button,#back-to-desk,#desk-return,#mobile-menu,#mobile-finish,#morgan-book,#tio-account-controls .settings-gear):hover:not(:disabled){background:var(--corner-hover);filter:none}}
html body :is(#fullscreen,[data-site-fullscreen],nav.reader-controls button,#album-mark-tools button,#back-to-desk,#desk-return,#mobile-menu,#mobile-finish,#morgan-book,#tio-account-controls .settings-gear):active:not(:disabled){background:var(--corner-active)}
html body nav.reader-controls #marked,html body #album-mark-tools #album-mark-jump{color:#ef5268}

/* Keep the monogram readable on its theme surface; session lighting is unchanged. */
html body #morgan-book .monogram,html body #morgan-book:is(:hover,:focus-visible) .monogram{fill:var(--corner-ink)}

/* Desktop and reader use the same origin, 32px controls and 8px spacing. */
:root{--top-control-left:max(12px,env(safe-area-inset-left),calc((100vw - 1360px)/2));--top-control-top:max(12px,env(safe-area-inset-top))}
html.tio-standalone{--top-control-top:max(20px,env(safe-area-inset-top))}
html body #tio-account-controls{left:calc(var(--top-control-left) + 40px);right:auto;top:var(--top-control-top)}
html body #tio-account-controls .settings-gear{margin-left:0;width:32px;height:32px;min-width:32px;min-height:32px;padding:6px;border:0;border-radius:6px}
html body #tio-account-controls .settings-gear svg{width:18px;height:18px}
html body.desk-page #fullscreen{left:calc(var(--top-control-left) + 80px);top:var(--top-control-top)}

/* Closing crosses keep their hit area without a focus frame. */
html body :is(.settings-close,#chat-close,#toc-close,#album-index-close,#album-photo-close,#mobile-menu[aria-expanded=true]):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
/* Remaining legacy actions use the same blue family. */
html body :is(#review-accounts button,.hint button){background:#192c46;color:#f4f0e8;border-radius:6px;box-shadow:0 2px 3px #07111e66}
html body :is(#review-accounts button,.hint button):hover:not(:disabled){background:#506b89}
html body :is(#review-accounts button,.hint button):active:not(:disabled){background:#405a78;box-shadow:inset 0 2px 3px #07111e99}
html body :is(#review-accounts button,.hint button):focus-visible{outline:1px solid #607f9e;outline-offset:2px}

/* Four-screen audit: shared action material, keyboard focus and icon geometry. */
:root{--navigation-focus:#607f9e;--tools-bg:#f4f0e8;--tools-ink:#35383c;--tools-muted:#62666c;--tools-line:#c9c5bf;--tools-control:#f4f0e8;--tools-control-ink:#192c46;--tools-hover:#fcfaf5;--tools-focus:#607f9e;--tools-soft:#dce3ea;--tools-shadow:0 2px 3px #07111e33}
@media(prefers-color-scheme:dark){:root{--navigation-focus:#a7bdd3;--tools-bg:#192c46;--tools-ink:#f4f0e8;--tools-muted:#bcc6d1;--tools-line:#4b5b70;--tools-control:#405a78;--tools-control-ink:#f4f0e8;--tools-hover:#506b89;--tools-focus:#a7bdd3;--tools-soft:#405a78;--tools-shadow:inset 0 1px 0 #dce3ea40,0 2px 3px #030912d9}}
body[data-ui-theme=light],#tio-account-controls[data-theme=light]{--navigation-focus:#607f9e}
body[data-ui-theme=dark],#tio-account-controls[data-theme=dark]{--navigation-focus:#a7bdd3}
html body :is(nav.reader-controls button,#album-mark-tools button,.page-turn,#pageControls button,#desk-return,#mobile-menu,#mobile-finish,#fullscreen,#morgan-book,#tio-account-controls .settings-gear):focus-visible{outline:1px solid var(--navigation-focus);outline-offset:2px}
html body #pageControls button{position:relative}
html body :is(.page-turn,#pageControls button){display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;padding:6px;border:0;border-radius:6px;background:var(--corner-bg);color:var(--corner-ink);box-shadow:0 2px 3px #07111e33;font:500 13px/18px TioNav,sans-serif}
html body :is(.page-turn,#pageControls button) svg{display:block;width:18px;height:18px;flex:none;pointer-events:none}
html body :is(.page-turn,#pageControls button)::after{content:'';position:absolute;inset:-6px}
html body :is(.page-turn,#pageControls button):hover:not(:disabled){background:var(--corner-hover)}
html body :is(.page-turn,#pageControls button):active:not(:disabled){background:var(--corner-active);box-shadow:inset 0 2px 3px #07111e99}
html body #pageControls{border-radius:12px;background:var(--corner-bg);color:var(--corner-ink);font:400 12px/18px TioNav,sans-serif;box-shadow:0 2px 7px #07111e66}
html body #desk-return{left:var(--top-control-left);top:var(--top-control-top)}
html body #mobile-menu{left:calc(var(--top-control-left) + 40px);top:var(--top-control-top)}
html body #mobile-finish:not([hidden]){top:var(--top-control-top);right:max(12px,env(safe-area-inset-right));min-height:44px}
html body :is(#fullscreen,#desk-return,#back-to-desk,#album-mark-tools button){position:relative}
html body #fullscreen,html body #desk-return{position:fixed}
html body :is(#fullscreen,#desk-return,#back-to-desk,#album-mark-tools button)::before{content:'';position:absolute;inset:-6px}
html body #morgan-chat button:focus-visible,html body #morgan-input:focus-visible,html body :is(#theme-toggle,#theme-switch):focus-visible{outline:1px solid var(--chat-focus,var(--navigation-focus));outline-offset:2px}
html body #morgan-chat #chat-close{display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none;width:32px;height:32px;min-width:32px;min-height:32px;padding:7px;border:0;border-radius:6px;background:transparent;box-shadow:none}
html body #morgan-chat #chat-close::after{content:'';position:absolute;inset:-6px}
html body #toc #toc-close,html body #album-index #album-index-close{align-items:center;justify-content:center;place-items:center;position:relative;flex:none;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;padding:7px;margin:0;border:0;border-radius:6px;background:transparent!important;color:var(--tools-ink)!important;box-shadow:none!important;line-height:1}
html body #toc #toc-close svg,html body #album-index #album-index-close svg{display:block;width:18px;height:18px;pointer-events:none}
html body :is(#toc-close,#album-index-close)::after{content:'';position:absolute;inset:-6px}
html body :is(#toc-close,#album-index-close):active{transform:none}
html body #toc{--panel:var(--tools-bg);--panel-ink:var(--tools-ink);--drawer-text:var(--tools-ink);--drawer-line:var(--tools-line);--drawer-muted:var(--tools-muted);--drawer-btn:var(--tools-control);--drawer-btn-ink:var(--tools-control-ink);--drawer-hover:var(--tools-hover);background:var(--tools-bg);color:var(--tools-ink)}
html body #toc :is(button,input):focus-visible,html body #album-index :is(button,input):focus-visible{outline:1px solid var(--tools-focus);outline-offset:2px}
html body #toc :is(input,#toc-items button){background:var(--tools-bg);color:var(--tools-ink);border-color:var(--tools-line)}
html body #setup-page .size-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body #setup-page .size-options button{min-width:0;width:100%;height:auto;min-height:44px;padding:6px 10px;border-radius:6px;font:500 13px/18px TioNav,sans-serif;background:var(--tools-control);color:var(--tools-control-ink);box-shadow:var(--tools-shadow)}
html body #setup-page .size-options button[aria-pressed=true]{background:#192c46;color:#f4f0e8;box-shadow:inset 0 0 0 1px #a7bdd3}
html body #setup-page :is(button,.setup-sample):focus-visible{outline:1px solid var(--tools-focus);outline-offset:2px}
html body #setup-save{min-height:44px;height:auto;padding:6px 10px;border-radius:6px;font:500 13px/18px TioNav,sans-serif;background:#192c46;color:#f4f0e8;box-shadow:var(--tools-shadow)}
html body #setup-save:hover{background:#506b89}
html body #test-back-landing{background:transparent;color:var(--chat-ink);border:0;border-radius:0;box-shadow:none;font:400 12px/18px TioNav,sans-serif;padding:6px 0;min-height:32px}
html body #test-back-landing:hover{background:#8ca2ba24}
@media(max-width:700px){html body #test-back-landing{min-height:44px}}
/* Closing crosses never inherit a focus frame from a more general button rule. */
html body :is(.settings-close,#chat-close,#toc-close,#album-index-close,#album-photo-close,#mobile-menu[aria-expanded=true]):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}

/* Album corners share the same origin and standalone safe-area offset. */
html body:has(.album-pages) .reader-toolbar{left:var(--top-control-left);right:var(--top-control-left);top:var(--top-control-top)}
html body .local-album-return{left:var(--top-control-left);top:var(--top-control-top)}
html body #album-mark-tools{right:var(--top-control-left);top:var(--top-control-top)}

/* Album: return, settings, fullscreen — the same three slots as the reader. */
@media(min-width:701px){
 html body:has(.album-pages) .reader-toolbar .view-tools .full{margin-left:40px}
}