/*
===========================================================================
Copyright (C) 2026 RPTX LLC

This file is part of AskFolder.
===========================================================================
*/
/* app.css -- askfolder.com/app, the tool itself, laid out like Laurel: a sidebar,
   one hero card for the folder, quiet cards around it, light and dark. Colors live
   in the tokens below and nowhere else */

/*
=========================================================================

TOKENS

=========================================================================
*/

:root, [data-theme="dark"] {
	color-scheme: dark;
	--bg:			#0a1322;
	--side:			#0b1628;
	--card:			#101e33;
	--card-2:		#0d1a2d;
	--inset:		rgba( 255, 255, 255, 0.035 );
	--line:			rgba( 150, 190, 255, 0.09 );
	--edge:			rgba( 150, 190, 255, 0.16 );
	--text:			#e8eef9;
	--text-2:		#a7b4c9;
	--text-3:		#74839b;
	--accent:		#6aa8ff;
	--accent-hi:	#8cbcff;
	--accent-soft:	rgba( 106, 168, 255, 0.14 );
	--on-accent:	#06122a;
	--good:			#64d18a;
	--good-soft:	rgba( 100, 209, 138, 0.14 );
	--warn:			#f5c451;
	--warn-text:	#f3e2b4;
	--warn-soft:	rgba( 245, 196, 81, 0.08 );
	--mark-bg:		rgba( 245, 196, 81, 0.22 );
	--mark:			#ffe7a8;
	--shadow:		0 1px 0 rgba( 255, 255, 255, 0.03 ) inset, 0 18px 40px -28px rgba( 0, 0, 0, 0.8 );
	--veil:			rgba( 4, 9, 18, 0.6 );
}
[data-theme="light"] {
	color-scheme: light;
	--bg:			#f3f6fb;
	--side:			#e9eef6;
	--card:			#ffffff;
	--card-2:		#f5f8fc;
	--inset:		#f2f6fb;
	--line:			#e3e9f2;
	--edge:			#d4ddea;
	--text:			#0f1b2d;
	--text-2:		#4b5b73;
	--text-3:		#7a889c;
	--accent:		#2f6fd6;
	--accent-hi:	#3d7fe6;
	--accent-soft:	#e4eeff;
	--on-accent:	#ffffff;
	--good:			#1f9d55;
	--good-soft:	#e2f5ea;
	--warn:			#b7791f;
	--warn-text:	#6b4a10;
	--warn-soft:	#fff6e0;
	--mark-bg:		#ffe9a6;
	--mark:			#3d2c00;
	--shadow:		0 1px 2px rgba( 15, 27, 45, 0.04 ), 0 12px 30px -20px rgba( 15, 27, 45, 0.25 );
	--veil:			rgba( 15, 27, 45, 0.35 );
}
:root {
	--font:		'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--brand:	'Montserrat', 'Inter', sans-serif;
	--mono:		'JetBrains Mono', ui-monospace, Consolas, monospace;
	--r:		20px;
	--side-w:	236px;
}

/*
=========================================================================

BASE

=========================================================================
*/

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var( --bg ); color: var( --text ); font: 400 15px/1.5 var( --font ); -webkit-font-smoothing: antialiased; }
a { color: var( --accent ); text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2 { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 99; border-radius: 8px; background: var( --accent ); color: var( --on-accent ); padding: 8px 12px; font-weight: 700; }
.skip:focus { left: 8px; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico.sm { width: 15px; height: 15px; }
.ico.xs { width: 13px; height: 13px; }
.muted { color: var( --text-3 ); }
.grow { flex: 1; }
mark { background: var( --mark-bg ); color: var( --mark ); border-radius: 3px; padding: 0 2px; }
label[for], button { cursor: pointer; }
:focus-visible { outline: 2px solid var( --accent ); outline-offset: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var( --good ); box-shadow: 0 0 0 3px var( --good-soft ); flex: none; }

/* before a folder, what's for a folder hides, and the other way round */
body:not( .using ) .folder-only { display: none !important; }
.using .empty-only { display: none !important; }

/*
=========================================================================

THE SHELL: sidebar, main, right column

=========================================================================
*/

.shell { min-height: 100vh; }
.side {
	position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; gap: 6px;
	width: var( --side-w ); padding: 16px 12px; background: var( --side ); border-right: 1px solid var( --line );
}
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 6px; }
.side-logo { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; color: var( --text ); font: 800 17px/1 var( --brand ); }
.side-folder { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; border-radius: 14px; padding: 10px; background: var( --inset ); }
.side-folder > div { min-width: 0; }
.side-folder b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.side-folder small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var( --text-3 ); }
.tile { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient( 145deg, #2a5ca8, #15335f ); color: #cfe2ff; }
.tile .ico { width: 18px; height: 18px; }
.side-nav { display: grid; gap: 2px; }
.side-nav a { display: flex; align-items: center; gap: 11px; border-radius: 10px; padding: 8px 10px; color: var( --text-2 ); font-size: 14px; font-weight: 600; }
.side-nav a .ico { width: 17px; height: 17px; }
.side-nav a:hover { background: var( --inset ); color: var( --text ); }
.side-nav a.on { background: var( --accent-soft ); color: var( --accent ); }
.side-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; border-top: 1px solid var( --line ); padding: 14px 8px 2px; }
.side-foot div { flex: 1; min-width: 0; }
.side-foot b { display: block; font-size: 13px; }
.side-foot small { display: block; font-size: 12px; color: var( --text-3 ); }

.topbar { display: none; }
.main { margin-left: var( --side-w ); padding: 28px 32px 48px; }
.cols { display: grid; grid-template-columns: minmax( 0, 1fr ); gap: 16px; max-width: 1180px; margin: 0 auto; align-items: start; }
/* a column is never wider than the screen, whatever a long file name or row wants */
.col-main > *, .col-side > * { min-width: 0; }
@media ( min-width: 1120px ) { .cols { grid-template-columns: minmax( 0, 1fr ) 320px; } }
.col-main, .col-side { display: grid; gap: 16px; min-width: 0; }

.theme-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var( --line ); border-radius: 12px; background: var( --card ); color: var( --text-2 ); }
.theme-btn:hover { color: var( --text ); }
[data-theme="dark"] .theme-btn .moon, [data-theme="light"] .theme-btn .sun { display: none; }

/*
=========================================================================

CARDS

=========================================================================
*/

.card { border-radius: var( --r ); background: var( --card ); border: 1px solid var( --line ); box-shadow: var( --shadow ); padding: 18px; }
.card h2 { font-size: 15px; font-weight: 700; }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 700; }

/* the hero: the one dark, glowing card, in both themes, like Laurel's balance */
.hero-card {
	position: relative; overflow: hidden; border-radius: 24px; padding: 26px 28px; color: #eef4ff;
	background:
		radial-gradient( 120% 140% at 100% 0%, rgba( 106, 168, 255, 0.35 ), transparent 55% ),
		linear-gradient( 145deg, #1d3c6c 0%, #112849 55%, #0c1d36 100% );
	box-shadow: 0 30px 60px -36px rgba( 30, 80, 160, 0.9 ), inset 0 1px 0 rgba( 255, 255, 255, 0.08 );
}
.hero-mark { position: absolute; right: -40px; bottom: -70px; width: 300px; height: 300px; fill: none; stroke: rgba( 255, 255, 255, 0.07 ); stroke-width: 1.4; pointer-events: none; }
.using .hero-empty, body:not( .using ) .hero-full { display: none; }
.hero-chip, .hero-state { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid rgba( 255, 255, 255, 0.16 ); background: rgba( 255, 255, 255, 0.07 ); padding: 4px 11px; font-size: 12px; font-weight: 700; color: #d6e6ff; }
.hero-card h1 { margin-top: 16px; font: 800 38px/1.05 var( --brand ); letter-spacing: -0.02em; color: #fff; }
.hero-empty p { max-width: 34rem; margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #c3d3ea; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn-main { display: inline-flex; align-items: center; gap: 9px; border-radius: 13px; padding: 12px 18px; background: #fff; color: #0c1d36; font-weight: 800; font-size: 15px; box-shadow: 0 12px 30px -14px rgba( 106, 168, 255, 0.9 ); }
.btn-main:hover { background: #e9f1ff; }
.btn-glass { display: inline-flex; align-items: center; gap: 9px; border-radius: 13px; padding: 12px 18px; border: 1px solid rgba( 255, 255, 255, 0.2 ); background: rgba( 255, 255, 255, 0.06 ); color: #fff; font-weight: 700; font-size: 15px; }
.btn-glass:hover { background: rgba( 255, 255, 255, 0.12 ); }
.hero-hint { display: block; margin-top: 14px; font-size: 13px; color: #8fa6c6; }
.link-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: #b9d4ff; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #fff; }
.dragging .hero-card { outline: 2px dashed #8cbcff; outline-offset: -8px; }

.hero-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.3 var( --font ); }
.hero-state[data-state="reading"] { color: #ffe7a8; border-color: rgba( 245, 196, 81, 0.35 ); }
.hero-big { margin-top: 10px; font: 800 52px/1 var( --font ); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero-big small { margin-left: 4px; font-size: 16px; font-weight: 600; letter-spacing: 0; color: #a9bfdd; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 1px solid rgba( 255, 255, 255, 0.1 ); padding-top: 16px; max-width: 460px; }
.hero-split:has( > [hidden] ) { grid-template-columns: 1fr; }
.hero-split > div[hidden] { display: none; }
.hero-split > div:not( [hidden] ) + div { border-left: 1px solid rgba( 255, 255, 255, 0.1 ); padding-left: 18px; }
.hero-split .k { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #a9bfdd; }
.hero-split b { display: block; margin-top: 4px; font-size: 22px; font-variant-numeric: tabular-nums; }
.reading { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: #c3d3ea; }
.reading[hidden] { display: none; }
.reading-bar { width: 160px; height: 6px; border-radius: 3px; background: rgba( 255, 255, 255, 0.12 ); overflow: hidden; }
.reading-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient( 90deg, #6aa8ff, #b9d4ff ); transition: width 0.25s; }
.hero-skipped { display: block; margin-top: 8px; font-size: 12px; color: #8fa6c6; }
.hero-skipped:empty { display: none; }
.hero-state[data-state="empty"] { color: #ffe7a8; border-color: rgba( 245, 196, 81, 0.5 ); background: rgba( 245, 196, 81, 0.12 ); }
.hero-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; border-radius: 14px; border: 1px solid rgba( 245, 196, 81, 0.45 ); background: rgba( 245, 196, 81, 0.12 ); padding: 11px 12px 11px 14px; font-size: 14px; font-weight: 600; color: #ffe7a8; }
.hero-alert[hidden] { display: none; }
.hero-alert .ico { color: #f5c451; }
.hero-alert span { flex: 1; min-width: 12rem; }
.hero-alert-btn { border-radius: 10px; background: #f5c451; color: #1f1600; padding: 8px 13px; font-size: 13px; font-weight: 800; }
.hero-alert-btn[hidden] { display: none; }
.hero-alert-btn:hover { background: #ffd56e; }

/* quick actions: Laurel's round buttons in tiles */
.actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; }
.act { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; line-height: 1.25; width: 98px; border: 1px solid var( --line ); border-radius: 16px; background: var( --card-2 ); padding: 14px 6px 12px; font-size: 13px; font-weight: 700; color: var( --text ); transition: transform 0.12s, border-color 0.12s; }
.act:hover { border-color: var( --edge ); transform: translateY( -1px ); }
.act-dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var( --accent ); color: var( --on-accent ); box-shadow: 0 8px 20px -10px var( --accent ); }
.act-dot .ico { width: 18px; height: 18px; }
#close .act-dot { background: var( --inset ); color: var( --text-2 ); box-shadow: none; border: 1px solid var( --edge ); }
#save .save-saved, #save .save-wait, #save .save-full { display: none; }
#save[data-state] .save-label { display: none; }
#save[data-state="saved"] .save-saved { display: inline; color: var( --good ); }
#save[data-state="wait"] .save-wait, #save[data-state="full"] .save-full { display: inline; color: var( --warn ); }

.limit { display: flex; align-items: center; gap: 10px; border-radius: 14px; border: 1px solid rgba( 245, 196, 81, 0.35 ); background: var( --warn-soft ); padding: 11px 14px; font-size: 13px; color: var( --warn-text ); }
.limit[hidden] { display: none !important; }
.limit .ico { color: var( --warn ); }
.limit span { flex: 1; }
.limit-link { flex: none; font-weight: 800; color: var( --warn ); }

/* the question */
.ask-card { padding: 14px; }
.ask { display: flex; align-items: center; gap: 10px; border-radius: 15px; border: 1px solid var( --edge ); background: var( --card-2 ); padding: 6px 6px 6px 16px; }
.ask:focus-within { border-color: var( --accent ); box-shadow: 0 0 0 4px var( --accent-soft ); }
.ask > .ico { color: var( --accent ); }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 10px 0; font-size: 17px; font-weight: 600; }
.ask input::placeholder { color: var( --text-3 ); font-weight: 500; }
.ask kbd { display: none; border: 1px solid var( --edge ); border-radius: 6px; padding: 2px 7px; font: 600 12px/1.4 var( --mono ); color: var( --text-3 ); }
@media ( min-width: 640px ) { .ask kbd { display: inline-block; } }
.btn-ask { border: 0; border-radius: 11px; padding: 11px 20px; background: var( --accent ); color: var( --on-accent ); font-weight: 800; }
.btn-ask:hover { background: var( --accent-hi ); }
.btn-ask { display: inline-flex; align-items: center; gap: 8px; }
.spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.7s linear infinite; }
.btn-ask[data-busy] .spin { display: inline-block; }
@keyframes spin { to { transform: rotate( 360deg ); } }
.answer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: 20px; margin: 10px 4px 2px; font-size: 13px; color: var( --text-3 ); }
.fixed b { color: var( --warn ); }
.fixed[hidden], .meaning[hidden] { display: none; }
.meaning { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.meaning::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var( --warn ); }
.meaning[data-state="ready"]::before { background: var( --good ); }
.meaning[data-state="off"]::before { background: var( --text-3 ); }

.empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 16px 22px; text-align: center; }
.empty[hidden] { display: none; }
.empty.flash { animation: flash 0.6s ease-out; }
/* a folder with no text: said loudly, in amber, right under the question */
.empty.warn { margin-top: 12px; border-radius: 18px; border: 1px solid rgba( 245, 196, 81, 0.5 ); background: var( --warn-soft ); padding: 24px 18px; }
.empty.warn .empty-icon { background: rgba( 245, 196, 81, 0.18 ); color: var( --warn ); }
.empty.warn b { font-size: 18px; color: var( --warn-text ); }
.empty.warn .empty-pro { border-color: var( --warn ); color: var( --warn-text ); }
@keyframes flash { 0% { transform: scale( 0.97 ); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var( --accent-soft ); color: var( --accent ); }
.empty b { margin-top: 6px; font-size: 16px; }
.empty p { max-width: 28rem; margin: 0; font-size: 14px; color: var( --text-2 ); }
.tries[hidden], .empty-pro[hidden] { display: none; }
.empty-pro { margin-top: 10px; }
.tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.tries button { border: 1px solid var( --edge ); border-radius: 999px; background: var( --card-2 ); padding: 6px 13px; font-size: 13px; font-weight: 600; color: var( --text-2 ); }
.tries button:hover { color: var( --accent ); border-color: var( --accent ); }

/* an answer */
.results:empty { display: none; }
.results { margin-top: 4px; }
.hit { display: block; width: 100%; text-align: left; border: 1px solid var( --line ); border-radius: 16px; background: var( --card-2 ); padding: 14px 16px; transition: border-color 0.12s, background 0.12s; }
.hit + .hit { margin-top: 8px; }
.hit:hover { border-color: var( --edge ); }
.hit.on { border-color: var( --accent ); background: var( --accent-soft ); }
.hit-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hit-file { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 800; }
.hit-where, .pv-where { flex: none; border-radius: 6px; background: var( --accent-soft ); color: var( --accent ); padding: 2px 7px; font: 700 12px/1.4 var( --mono ); }
.hit-how { flex: none; border-radius: 6px; border: 1px solid rgba( 245, 196, 81, 0.4 ); padding: 1px 7px; font-size: 11px; font-weight: 700; color: var( --warn ); }
.hit-meter { flex: none; margin-left: auto; width: 46px; height: 5px; border-radius: 3px; background: var( --line ); overflow: hidden; }
.hit-meter::after { content: ""; display: block; height: 100%; width: calc( var( --m ) * 100% ); border-radius: 3px; background: var( --accent ); }
.hit-text { display: block; margin-top: 8px; font-size: 14px; line-height: 1.65; color: var( --text-2 ); }
.hit-path { display: block; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px/1.4 var( --mono ); color: var( --text-3 ); }

/* before a folder: three steps */
.steps { display: grid; gap: 14px; }
@media ( min-width: 760px ) { .steps { grid-template-columns: repeat( 3, 1fr ); } }
.steps div { display: grid; gap: 4px; }
.step-n { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 6px; border-radius: 50%; background: var( --accent-soft ); color: var( --accent ); font-weight: 800; font-size: 13px; }
.steps b { font-size: 14px; }
.steps small { font-size: 13px; color: var( --text-2 ); }

/* the files */
.files { display: grid; gap: 2px; margin: 10px -6px 0; padding: 0; list-style: none; max-height: 380px; overflow-y: auto; }
@media ( min-width: 860px ) { .files { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } }
.file { min-width: 0; }
.file { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 7px 6px; }
.file:hover { background: var( --inset ); }
.file-kind { flex: none; width: 38px; border-radius: 6px; background: var( --accent-soft ); color: var( --accent ); padding: 3px 0; text-align: center; font: 700 10px/1.3 var( --mono ); }
.file-body { min-width: 0; }
.file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; }
.file small { display: block; font-size: 11px; color: var( --text-3 ); }
.file.failed small, .file.skipped small { color: var( --warn ); }
.file.skipped .file-kind { background: var( --inset ); color: var( --text-3 ); }
.file.reading small { color: var( --accent ); }

/* the right column */
.kinds { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.kinds li { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; font-size: 13px; }
.kinds b { font-variant-numeric: tabular-nums; }
.kinds i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var( --inset ); overflow: hidden; }
.kinds i::after { content: ""; display: block; height: 100%; width: calc( var( --p ) * 100% ); border-radius: 3px; background: var( --accent ); }
.rows { display: grid; margin: 8px 0 0; }
.rows div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var( --line ); font-size: 13px; }
.rows div:last-child { border-bottom: 0; }
.rows dt { color: var( --text-2 ); }
.rows dd { margin: 0; display: flex; align-items: center; gap: 7px; font-weight: 700; }
.rows dd.good { color: var( --good ); }
.rows .dot { width: 7px; height: 7px; box-shadow: none; }
.saved ul { display: grid; gap: 6px; margin: 12px 0 8px; padding: 0; list-style: none; }
.saved[hidden] { display: none; }
.saved-row { display: flex; align-items: center; gap: 8px; }
.saved-open { flex: 1; min-width: 0; text-align: left; border: 1px solid var( --line ); border-radius: 12px; background: var( --card-2 ); padding: 9px 12px; }
.saved-open:hover { border-color: var( --accent ); }
.saved-open b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.saved-open small, .saved > small { display: block; font-size: 12px; color: var( --text-3 ); }
.saved-none { margin: 8px 0 0; font-size: 13px; color: var( --text-2 ); }
.saved-none[hidden] { display: none; }
.saved-none a { font-weight: 700; }
.icon-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px; background: var( --inset ); color: var( --text-2 ); }
.icon-btn:hover { color: var( --text ); }
.pro-badge { flex: none; border-radius: 999px; background: var( --accent ); color: var( --on-accent ); padding: 4px 10px; font-size: 11px; font-weight: 800; }
.pro-badge[hidden] { display: none; }
.pro-badge.ended { background: var( --warn-soft ); color: var( --warn ); }

/*
=========================================================================

THE PASSAGE: a sheet from the right (from the bottom on a phone)

=========================================================================
*/

.preview {
	position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; flex-direction: column;
	width: min( 520px, calc( 100vw - 24px ) ); border-radius: 22px; background: var( --card ); border: 1px solid var( --edge );
	box-shadow: 0 30px 80px -20px rgba( 0, 0, 0, 0.5 ); animation: slide 0.22s ease-out;
}
.preview[hidden] { display: none; }
.previewing::after { content: ""; position: fixed; inset: 0; z-index: 55; background: var( --veil ); }
@keyframes slide { from { transform: translateX( 24px ); opacity: 0; } }
.pv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var( --line ); }
.pv-head b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.pv-head small { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.pv-text { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px 18px; border-top: 1px solid var( --line ); }
.btn-soft { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var( --edge ); border-radius: 11px; background: var( --card-2 ); padding: 9px 14px; font-size: 13px; font-weight: 700; color: var( --text ); }
.btn-soft:hover { border-color: var( --accent ); }
.btn-soft .ico { color: var( --accent ); }
#pv-copy .copy-b, #pv-copy[data-done] .copy-a { display: none; }
#pv-copy[data-done] .copy-b { display: inline; color: var( --good ); }
.pv-nofile { align-self: center; font-size: 12px; color: var( --text-3 ); }
.pv-nofile[hidden], #pv-open[hidden] { display: none; }

/* a folder dragged over any part of the page */
.drag-veil { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: var( --veil ); backdrop-filter: blur( 6px ); -webkit-backdrop-filter: blur( 6px ); pointer-events: none; }
.dragging .drag-veil { display: grid; }
.drag-veil div { display: flex; flex-direction: column; align-items: center; gap: 10px; border-radius: 28px; border: 2px dashed var( --accent ); background: var( --card ); padding: 44px 60px; }
.drag-veil .ico { width: 44px; height: 44px; color: var( --accent ); }
.drag-veil b { font: 800 24px/1.2 var( --brand ); }
.drag-veil span { font-size: 14px; color: var( --text-2 ); }

/*
=========================================================================

A PHONE: a top bar and tabs instead of the sidebar

=========================================================================
*/

.tabs { display: none; }
@media ( max-width: 860px ) {
	.side { display: none; }
	.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; padding: 10px 14px; background: color-mix( in srgb, var( --bg ) 88%, transparent ); backdrop-filter: blur( 14px ); -webkit-backdrop-filter: blur( 14px ); border-bottom: 1px solid var( --line ); }
	.topbar .side-logo { padding: 0; }
	.main { margin-left: 0; padding: 14px 12px calc( 84px + env( safe-area-inset-bottom ) ); }
	.hero-card { padding: 22px 20px; }
	.hero-card h1 { font-size: 32px; }
	.hero-big { font-size: 42px; }
	.act { flex: 1; width: auto; min-width: 70px; }
	.tabs {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat( 4, 1fr );
		padding: 6px 8px calc( 6px + env( safe-area-inset-bottom ) ); background: color-mix( in srgb, var( --card ) 92%, transparent );
		backdrop-filter: blur( 16px ); -webkit-backdrop-filter: blur( 16px ); border-top: 1px solid var( --line );
	}
	.tabs a { display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 12px; padding: 7px 0; font-size: 11px; font-weight: 700; color: var( --text-3 ); }
	.tabs a.on { background: var( --accent-soft ); color: var( --accent ); }
	.preview { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 80vh; animation-name: rise; }
}
@keyframes rise { from { transform: translateY( 24px ); opacity: 0; } }
@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	.preview, .empty.flash, .spin { animation: none; }
	.act { transition: none; }
}

/*
=========================================================================

THE ACCOUNT MENU, AND THE SHEETS OVER THE APP (Pro, privacy, Settings)

=========================================================================
*/

.side-status { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 10px 10px 12px; font-size: 12px; color: var( --text-3 ); }
.side-status .dot { width: 7px; height: 7px; box-shadow: none; }
.side-foot { margin-top: 0; padding: 10px 2px 0; gap: 6px; }
.me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 12px; background: none; padding: 7px 8px; text-align: left; }
.me:hover, .me[aria-expanded="true"] { background: var( --inset ); }
.me > .ico { color: var( --text-3 ); transform: rotate( 180deg ); }
.me-text { flex: 1; min-width: 0; }
.me-text b, .me-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-text b { font-size: 13px; }
.me-text small { font-size: 12px; color: var( --text-3 ); }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var( --inset ); border: 1px solid var( --edge ); color: var( --text-2 ); }
.avatar.pro { background: var( --accent ); border-color: var( --accent ); color: var( --on-accent ); }

.menu {
	position: fixed; left: 12px; bottom: 64px; z-index: 70; width: 228px; display: grid; gap: 2px;
	border-radius: 16px; background: var( --card ); border: 1px solid var( --edge ); padding: 8px;
	box-shadow: 0 24px 60px -20px rgba( 0, 0, 0, 0.55 ); animation: pop 0.14s ease-out;
}
.menu[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY( 6px ); } }
.menu-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var( --line ); }
.menu-head b, .menu-head small { display: block; }
.menu-head b { font-size: 14px; }
.menu-head small { font-size: 12px; color: var( --text-3 ); }
.menu button { display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; background: none; padding: 9px 10px; font-size: 14px; font-weight: 600; text-align: left; }
.menu button .ico { width: 17px; height: 17px; color: var( --text-2 ); }
.menu button:hover, .menu button:focus-visible { background: var( --inset ); outline: none; }
.menu-link { display: flex; align-items: center; gap: 11px; margin-top: 4px; border-top: 1px solid var( --line ); border-radius: 0 0 10px 10px; padding: 11px 10px 9px; font-size: 14px; font-weight: 600; color: var( --text ); }
.menu-link .ico { width: 17px; height: 17px; color: var( --text-2 ); }
.menu-link .ext { width: 12px; height: 12px; margin-left: auto; }
.menu-link:hover { background: var( --inset ); color: var( --text ); }
.avatar { font-weight: 800; font-size: 13px; }

dialog.sheet {
	border: 1px solid var( --edge ); border-radius: 24px; background: var( --card ); color: var( --text ); padding: 0;
	width: min( 460px, calc( 100vw - 24px ) ); max-height: calc( 100vh - 48px ); box-shadow: 0 40px 100px -30px rgba( 0, 0, 0, 0.6 );
}
dialog.sheet[open] { animation: pop 0.18s ease-out; }
dialog.sheet::backdrop { background: var( --veil ); backdrop-filter: blur( 3px ); -webkit-backdrop-filter: blur( 3px ); }
dialog.sheet-lg { width: min( 860px, calc( 100vw - 24px ) ); height: min( 600px, calc( 100vh - 48px ) ); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 6px 22px; }
.sheet-head h2 { font-size: 17px; }
.sheet-body { display: grid; gap: 16px; padding: 8px 22px 22px; overflow-y: auto; }
.sh-hero { display: grid; justify-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.sh-hero b { font: 800 22px/1.2 var( --brand ); }
.sh-hero p { max-width: 24rem; margin: 0; font-size: 14px; color: var( --text-2 ); }
.tile.big { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 6px; }
.tile.big .ico { width: 24px; height: 24px; }
.tile.good { background: linear-gradient( 145deg, #1f8a52, #11512f ); color: #d4f5e2; }
.sh-gets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.sh-gets li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.sh-gets .ico { color: var( --accent ); }
.sh-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sh-plans[hidden] { display: none; }
.sh-plan { display: grid; gap: 4px; border: 1px solid var( --edge ); border-radius: 16px; background: var( --card-2 ); padding: 14px; color: var( --text ); transition: border-color 0.12s, transform 0.12s; }
.sh-plan:hover { border-color: var( --accent ); transform: translateY( -1px ); }
.sh-plan.best { border-color: var( --accent ); background: var( --accent-soft ); }
.sh-plan b { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.sh-plan b i { font-style: normal; border-radius: 999px; background: var( --good-soft ); color: var( --good ); padding: 1px 7px; font-size: 11px; }
.sh-plan span { font-size: 13px; color: var( --text-2 ); }
.sh-plan em { font: 800 24px/1 var( --font ); font-style: normal; color: var( --text ); }
.sh-plan small { font-size: 12px; color: var( --text-3 ); }
.sh-note { display: flex; gap: 8px; margin: 0; font-size: 12px; color: var( --text-3 ); }
.sh-note[hidden], .sh-wide[hidden] { display: none; }
.sh-note .ico { margin-top: 2px; }
.sh-wide { justify-content: center; }
.sh-text { margin: 0; font-size: 13px; line-height: 1.6; color: var( --text-2 ); }

/* Settings: sections on the left, the pane on the right (a strip over the pane on a phone) */
.settings { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
.set-nav { display: flex; flex-direction: column; gap: 2px; padding: 18px 10px; background: var( --side ); border-right: 1px solid var( --line ); overflow-y: auto; }
.set-nav h2 { padding: 0 10px 12px; font-size: 18px; }
.set-nav button { display: flex; align-items: center; gap: 11px; border: 0; border-radius: 10px; background: none; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var( --text-2 ); text-align: left; }
.set-nav button .ico { width: 17px; height: 17px; }
.set-nav button:hover { background: var( --inset ); color: var( --text ); }
.set-nav button.on { background: var( --accent-soft ); color: var( --accent ); }
.set-body { position: relative; padding: 22px 26px; overflow-y: auto; }
.set-close { position: absolute; top: 14px; right: 14px; }
.set-body section { display: grid; gap: 16px; }
.set-body section[hidden] { display: none; }
.set-body h3 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var( --line ); font-size: 17px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.set-row b { display: block; font-size: 14px; }
.set-row small { display: block; margin-top: 3px; max-width: 26rem; font-size: 13px; color: var( --text-2 ); }
.set-row select { flex: none; border: 1px solid var( --edge ); border-radius: 10px; background: var( --card-2 ); padding: 8px 10px; font-size: 14px; }
.set-lead, .set-said { margin: 0; font-size: 13px; line-height: 1.6; color: var( --text-2 ); }
.set-said[hidden] { display: none; }
.set-choice { display: grid; grid-template-columns: repeat( 3, 1fr ); gap: 12px; }
.set-choice label { display: grid; gap: 8px; justify-items: center; font-size: 13px; font-weight: 700; }
.set-choice input { position: absolute; opacity: 0; pointer-events: none; }
.sw { width: 100%; height: 74px; border-radius: 14px; border: 2px solid var( --edge ); }
.set-choice input:checked + .sw { border-color: var( --accent ); box-shadow: 0 0 0 3px var( --accent-soft ); }
.set-choice input:focus-visible + .sw { outline: 2px solid var( --accent ); outline-offset: 2px; }
.sw-light { background: linear-gradient( 160deg, #ffffff 0 45%, #e9eef6 45% ); }
.sw-dark { background: linear-gradient( 160deg, #101e33 0 45%, #0a1322 45% ); }
.sw-system { background: linear-gradient( 90deg, #ffffff 0 50%, #101e33 50% ); }
.bill-card { display: grid; gap: 6px; justify-items: start; border: 1px solid var( --line ); border-radius: 16px; background: var( --card-2 ); padding: 16px; }
.bill-card b { font-size: 16px; }
.bill-card .btn-soft + .btn-soft { margin-top: 2px; }
.bill-card p { margin: 0 0 6px; font-size: 13px; color: var( --text-2 ); }
.btn-danger { justify-self: start; border: 1px solid rgba( 239, 90, 90, 0.5 ); border-radius: 11px; background: none; padding: 9px 14px; font-size: 13px; font-weight: 700; color: #e05252; }
.btn-danger:hover, .btn-danger.armed { background: #d64545; border-color: #d64545; color: #fff; }
.btn-danger[hidden] { display: none; }
.set-links { display: flex; flex-wrap: wrap; gap: 8px; }
.keys kbd { border: 1px solid var( --edge ); border-radius: 6px; padding: 1px 7px; font: 600 12px/1.4 var( --mono ); }

@media ( max-width: 860px ) {
	dialog.sheet { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: 24px 24px 0 0; }
	dialog.sheet-lg { height: 88vh; }
	.settings { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.set-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 14px 12px 10px; border-right: 0; border-bottom: 1px solid var( --line ); }
	.set-nav h2 { display: none; }
	.set-nav button { flex: none; }
	.set-body { padding: 18px 16px 28px; }
	.set-close { top: 10px; right: 10px; }
	.menu { left: auto; right: 10px; bottom: auto; top: 58px; }
	.sh-gets, .sh-plans { grid-template-columns: 1fr; }
	.set-row { flex-direction: column; align-items: stretch; }
}
@media ( prefers-reduced-motion: reduce ) {
	.menu, dialog.sheet[open] { animation: none; }
}