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

This file is part of AskFolder.
===========================================================================
*/
/* askfolder.css -- what AskFolder has that laurel.cash doesn't: the drop card, an
   answer, the feature art, pricing, and the tool itself once a folder is open */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.picker { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
label.btn-glow, label.btn-line, label.btn-white, label.btn-soft { cursor: pointer; }
.muted { color: var( --text-3 ); }
mark { background: rgba( 245, 196, 81, 0.22 ); color: #ffe7a8; border-radius: 3px; padding: 0 2px; }
.wide { justify-content: center; width: 100%; }
.btn-line.wide { margin-top: 0; }

/* ------------------------------------------------ hero: the drop card and an example answer */
.drop {
	position: relative; border-radius: 28px; padding: 10px;
	background: linear-gradient( 160deg, rgba( 106, 168, 255, 0.18 ), rgba( 106, 168, 255, 0.04 ) 60% );
	border: 1px solid var( --edge );
	box-shadow: 0 40px 100px -30px rgba( 106, 168, 255, 0.45 );
}
.drop-zone {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
	border-radius: 20px; border: 2px dashed rgba( 150, 190, 255, 0.28 ); background: rgba( 7, 14, 26, 0.6 );
	padding: 34px 22px 28px; transition: border-color 0.15s, background 0.15s;
}
.dragging .drop-zone { border-color: var( --sky ); background: rgba( 106, 168, 255, 0.08 ); }
.drop-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: rgba( 106, 168, 255, 0.14 ); color: var( --sky ); }
.drop-icon .ico { width: 32px; height: 32px; }
.drop-zone b { font: 800 22px/1.2 var( --brand ); }
.drop-zone p { max-width: 24rem; margin: 0; font-size: 14px; color: var( --text-2 ); }
.drop-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.drop-buttons .btn-glow { padding: 13px 22px; font-size: 15px; }
.drop-buttons .btn-line { margin-top: 0; padding: 12px 20px; }
.drop-foot { display: flex; align-items: center; gap: 8px; padding: 12px 10px 4px; font-size: 12px; color: var( --text-2 ); }
.drop-foot .ico { color: var( --mint ); }
.sample { margin-top: 18px; border-radius: 20px; background: var( --card ); border: 1px solid rgba( 255, 255, 255, 0.05 ); padding: 14px; }
.sample-q { display: flex; align-items: center; gap: 8px; border-radius: 12px; background: var( --card-2 ); border: 1px solid var( --line ); padding: 10px 12px; font-size: 13px; color: var( --text-2 ); }
.sample-q .ico { color: var( --sky ); }
.sample-hit { margin-top: 10px; }
.facts dd.sky { color: var( --sky ); font-size: 20px; }

/* ------------------------------------------------ an answer: file, where, how well it matched, the words */
.hit {
	display: block; width: 100%; text-align: left; color: var( --text ); font: inherit;
	border-radius: 16px; background: var( --card-2 ); border: 1px solid var( --line ); padding: 14px 16px;
}
button.hit { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
button.hit:hover { border-color: var( --edge ); background: #12223a; }
button.hit.on { border-color: rgba( 106, 168, 255, 0.55 ); background: #13253f; }
.hit + .hit { margin-top: 10px; }
.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; color: #fff; }
.hit-where { flex: none; border-radius: 6px; background: rgba( 106, 168, 255, 0.14 ); color: var( --sky-pale ); padding: 2px 7px; font: 700 12px/1.4 var( --mono ); }
.hit-meter { flex: none; margin-left: auto; width: 46px; height: 5px; border-radius: 3px; background: rgba( 255, 255, 255, 0.08 ); overflow: hidden; }
.hit-meter::after { content: ""; display: block; height: 100%; width: calc( var( --m ) * 100% ); border-radius: 3px; background: linear-gradient( 90deg, var( --sky ), var( --sky-pale ) ); }
.hit-text { display: block; margin-top: 8px; font-size: 14px; line-height: 1.65; color: #cfd9ea; }
.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 ); }

/* ------------------------------------------------ feature art */
.art-ask { display: flex; align-items: center; gap: 8px; border-radius: 12px; background: var( --card-2 ); border: 1px solid var( --edge ); padding: 11px 14px; font-size: 14px; color: #fff; }
.art-ask .ico { color: var( --sky ); }
.art-hits { margin-top: 14px; }
.cite { position: relative; border-radius: 18px; background: var( --paper ); color: var( --ink ); padding: 24px 24px 20px; box-shadow: 0 30px 60px -24px rgba( 0, 0, 0, 0.7 ); transform: rotate( -1deg ); }
.cite .ico { width: 26px; height: 26px; color: #c79a2a; }
.cite p { margin: 10px 0 0; font: 500 17px/1.6 Georgia, "Times New Roman", serif; color: var( --ink ); }
.cite-src { display: block; margin-top: 14px; font: 700 12px/1.4 var( --mono ); color: #5b6a63; }
.cite-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cite-acts span { display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; background: #e3e0d2; padding: 6px 10px; font-size: 12px; font-weight: 700; color: #2c3a35; }
.net { font-size: 14px; }
.net-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var( --line ); }
.net-row:first-child { border-top: 0; }
.net-row span:nth-child( 2 ) { font: 600 13px/1.4 var( --mono ); color: #fff; }
.net-row em { font-style: normal; font-size: 12px; color: var( --text-3 ); }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: #e05d5d; box-shadow: 0 0 0 4px rgba( 224, 93, 93, 0.15 ); }
.net-dot.ok { background: var( --mint ); box-shadow: 0 0 0 4px rgba( 100, 209, 138, 0.15 ); }
.net-row.blocked span:nth-child( 2 ) { color: var( --text-2 ); text-decoration: line-through; text-decoration-color: #e05d5d; }
.net-row.blocked em { color: #ffb4b4; font-weight: 700; }
.net-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; border-radius: 12px; background: rgba( 100, 209, 138, 0.08 ); padding: 10px 12px; font-size: 13px; color: #c6ead2; }
.net-foot .ico { color: var( --mint ); }
.tile .ico { color: var( --sky ); }

/* ------------------------------------------------ pricing */
.pricing { padding: 96px 0; border-top: 1px solid rgba( 255, 255, 255, 0.05 ); }
.plans { display: grid; gap: 20px; margin-top: 40px; }
@media ( min-width: 860px ) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { display: flex; flex-direction: column; gap: 18px; border-radius: 24px; background: var( --card ); border: 1px solid rgba( 255, 255, 255, 0.06 ); padding: 30px; }
.plan.pro { background: linear-gradient( 160deg, #15294a, var( --card ) 70% ); border-color: rgba( 106, 168, 255, 0.35 ); box-shadow: 0 30px 80px -40px rgba( 106, 168, 255, 0.6 ); }
.plan-name { display: flex; align-items: center; gap: 10px; font: 800 24px/1.2 var( --brand ); color: #fff; }
.soon { border-radius: 999px; border: 1px solid rgba( 245, 196, 81, 0.35 ); background: rgba( 245, 196, 81, 0.08 ); padding: 3px 9px; font: 700 11px/1.3 var( --font ); color: #f8dc94; }
.plan-price { color: var( --text-2 ); font-size: 14px; }
.plan-price span { margin-right: 6px; font: 800 40px/1 var( --brand ); color: #fff; }
.plan ul { flex: 1; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.plan li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: #cfd9ea; }
.plan li .ico { margin-top: 3px; color: var( --sky ); }
.plan-note { margin: -4px 0 0; font-size: 12px; color: var( --text-3 ); text-align: center; }

/* ------------------------------------------------ the tool: shown once a folder is open */
.app { display: none; padding: 24px 0 64px; }
.using .app { display: block; }
.using main { display: none; }
.app-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.app-folder { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-folder b { display: block; font: 800 20px/1.2 var( --brand ); overflow-wrap: anywhere; }
.app-folder small { display: block; margin-top: 2px; font-size: 13px; color: var( --text-2 ); }
.app-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba( 106, 168, 255, 0.14 ); color: var( --sky ); }
.app-actions { display: flex; gap: 8px; }
.btn-soft {
	display: inline-flex; align-items: center; gap: 7px; border: 1px solid var( --edge ); border-radius: 11px;
	background: rgba( 255, 255, 255, 0.03 ); padding: 9px 14px; font: 700 13px/1 var( --font ); color: var( --text );
	cursor: pointer;
}
.btn-soft:hover { background: rgba( 255, 255, 255, 0.07 ); color: #fff; }
.btn-soft .ico { color: var( --sky ); }
.reading { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var( --text-2 ); }
.reading[hidden] { display: none; }
.reading-bar { width: 140px; height: 6px; border-radius: 3px; background: rgba( 255, 255, 255, 0.08 ); overflow: hidden; }
.reading-bar i { display: block; height: 100%; width: 0; background: linear-gradient( 90deg, var( --sky ), var( --sky-pale ) ); transition: width 0.25s; }
.ask {
	position: sticky; top: 76px; z-index: 30; display: flex; align-items: center; gap: 10px; margin-top: 20px;
	border-radius: 18px; border: 1px solid rgba( 106, 168, 255, 0.35 ); background: rgba( 14, 27, 45, 0.92 );
	backdrop-filter: blur( 16px ); -webkit-backdrop-filter: blur( 16px );
	padding: 8px 8px 8px 18px; box-shadow: 0 20px 50px -24px rgba( 106, 168, 255, 0.55 );
}
.ask:focus-within { border-color: var( --sky ); }
.ask > .ico { color: var( --sky ); }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 600 18px/1.4 var( --font ); padding: 10px 0; }
.ask input::placeholder { color: var( --text-3 ); font-weight: 500; }
.ask input::-webkit-search-cancel-button { filter: invert( 0.7 ); }
.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: 12px; padding: 12px 20px; font: 800 15px/1 var( --font ); color: var( --on-sky ); background: linear-gradient( 90deg, var( --sky ), var( --sky-pale ) ); cursor: pointer; }
.answer-meta { min-height: 20px; margin: 12px 4px 0; font-size: 13px; color: var( --text-3 ); }
.app-grid { display: grid; gap: 20px; margin-top: 8px; align-items: start; }
@media ( min-width: 1000px ) { .previewing .app-grid { grid-template-columns: 1fr 1fr; } }
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; border-radius: 22px; border: 1px dashed var( --edge ); padding: 44px 20px; }
.empty[hidden] { display: none; }
.empty .ico { width: 30px; height: 30px; color: var( --gold ); }
.empty b { font: 800 20px/1.3 var( --brand ); }
.empty p { max-width: 30rem; margin: 0; font-size: 14px; color: var( --text-2 ); }
.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: none; padding: 6px 13px; font: 600 13px/1.3 var( --font ); color: var( --text-2 ); cursor: pointer; }
.tries button:hover { color: #fff; border-color: rgba( 106, 168, 255, 0.5 ); }
.preview { position: sticky; top: 156px; display: flex; flex-direction: column; max-height: calc( 100vh - 176px ); border-radius: 22px; background: var( --card ); border: 1px solid var( --edge ); overflow: hidden; }
.preview[hidden] { display: none; }
.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-where { border-radius: 6px; background: rgba( 106, 168, 255, 0.14 ); color: var( --sky-pale ); padding: 1px 6px; font: 700 12px/1.4 var( --mono ); }
.icon-btn { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border: 0; border-radius: 9px; background: rgba( 255, 255, 255, 0.05 ); color: var( --text-2 ); cursor: pointer; }
.icon-btn:hover { color: #fff; background: rgba( 255, 255, 255, 0.1 ); }
.pv-text { flex: 1; overflow-y: auto; padding: 16px 18px; font-size: 15px; line-height: 1.75; color: #dbe4f2; 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 ); }
#pv-copy .copy-b, #pv-copy[data-done] .copy-a { display: none; }
#pv-copy[data-done] .copy-b { display: inline; color: var( --mint ); }
.files-box { margin-top: 28px; border-radius: 18px; border: 1px solid var( --line ); background: rgba( 0, 0, 0, 0.12 ); }
.files-box summary { padding: 14px 18px; font-size: 14px; }
.files { display: grid; gap: 2px; margin: 0; padding: 0 10px 12px; list-style: none; max-height: 340px; overflow-y: auto; }
@media ( min-width: 860px ) { .files { grid-template-columns: 1fr 1fr; } }
.file { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 8px 8px; }
.file-kind { flex: none; width: 38px; border-radius: 6px; background: rgba( 106, 168, 255, 0.12 ); color: var( --sky-pale ); 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: #f8dc94; }
.file.skipped .file-kind { background: rgba( 255, 255, 255, 0.06 ); color: var( --text-3 ); }
.file.reading small { color: var( --sky ); }

/* a folder dragged over any part of the page */
.drag-veil { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba( 7, 14, 26, 0.82 ); 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( --sky ); padding: 48px 64px; }
.drag-veil .ico { width: 44px; height: 44px; color: var( --sky ); }
.drag-veil b { font: 800 26px/1.2 var( --brand ); }
.drag-veil span { font-size: 14px; color: var( --text-2 ); }

/* the free limit, said where it applies */
.limit { display: flex; align-items: center; gap: 10px; margin-top: 14px; border-radius: 14px; border: 1px solid rgba( 245, 196, 81, 0.3 ); background: rgba( 245, 196, 81, 0.07 ); padding: 10px 14px; font-size: 13px; color: #f3e2b4; }
.limit[hidden] { display: none; }
.limit .ico { color: var( --gold ); }
.limit span { flex: 1; }
.limit-link { flex: none; font-weight: 800; color: var( --gold ); }

/* the example answers' meters (no inline styles under the CSP) */
.hit-meter.m-100 { --m: 1; }
.hit-meter.m-62 { --m: 0.62; }

/* below two columns, an opened answer rises as a sheet over the list instead of
   landing under it, out of sight on a phone */
@media ( max-width: 999px ) {
	.preview {
		position: fixed; top: auto; left: 10px; right: 10px; bottom: 10px; z-index: 60;
		max-height: 78vh; box-shadow: 0 -20px 60px rgba( 0, 0, 0, 0.6 );
		animation: rise 0.22s ease-out;
	}
	.previewing::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba( 4, 9, 18, 0.55 ); }
}
@keyframes rise { from { transform: translateY( 24px ); opacity: 0; } }
@media ( prefers-reduced-motion: reduce ) { .preview { animation: none; } }

/* how an answer was found, and the model's state */
.answer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.fixed b { color: var( --gold ); }
.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( --gold ); }
.meaning[data-state="ready"]::before { background: var( --mint ); }
.meaning[data-state="off"]::before { background: var( --text-3 ); }
.hit-how { flex: none; border-radius: 6px; border: 1px solid rgba( 245, 196, 81, 0.3 ); padding: 1px 7px; font-size: 11px; font-weight: 700; color: #f8dc94; }

/* the yearly plan's saving, beside its price */
.save { margin-left: 6px; border-radius: 999px; background: rgba( 100, 209, 138, 0.14 ); color: var( --mint ); padding: 2px 8px; font-style: normal; font-size: 12px; font-weight: 700; }
.later { margin-left: 4px; border-radius: 999px; border: 1px solid var( --edge ); padding: 1px 7px; font-size: 11px; font-weight: 700; color: var( --text-3 ); white-space: nowrap; }
.plan-note a { color: var( --text-2 ); text-decoration: underline; }

/* ------------------------------------------------ /pro */
.pro-page h1 { font-size: 44px; }
.pro-plans { margin-top: 32px; }
button.plan { text-align: left; font: inherit; color: inherit; cursor: pointer; gap: 8px; transition: border-color 0.15s, transform 0.15s; }
button.plan:hover { border-color: rgba( 106, 168, 255, 0.6 ); transform: translateY( -2px ); }
button.plan[disabled] { cursor: not-allowed; opacity: 0.55; transform: none; }
button.plan small { color: var( --text-3 ); font-size: 13px; }
.pro-closed { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14px; color: #f3e2b4; }
.pro-closed[hidden] { display: none; }
.pro-note { margin-top: 14px; text-align: left; }
.pro-state { margin: 28px 0 0; border-radius: 18px; border: 1px solid rgba( 100, 209, 138, 0.35 ); background: rgba( 100, 209, 138, 0.08 ); padding: 18px 20px; color: #d7f2e0; }
.pro-state[hidden] { display: none; }
.pro-state.expired { border-color: rgba( 245, 196, 81, 0.35 ); background: rgba( 245, 196, 81, 0.07 ); color: #f3e2b4; }
.pro-state b { color: #fff; }
.pro-state .btn-soft { margin-top: 12px; }
.restore { margin-top: 40px; }
.restore-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.restore-form input { flex: 1; min-width: 220px; border: 1px solid var( --edge ); border-radius: 11px; background: var( --card-2 ); color: #fff; padding: 10px 14px; font: 500 14px/1.3 var( --mono ); }
.restore-msg { min-height: 1.4em; margin: 10px 0 0 !important; font-size: 14px; }
.restore-msg.bad { color: #ffb4b4 !important; }
.restore-msg.good { color: #c6ead2 !important; }

/* ------------------------------------------------ Pro in the app */
.pro-badge { border-radius: 999px; background: linear-gradient( 90deg, var( --sky ), var( --sky-pale ) ); color: var( --on-sky ); padding: 5px 11px; font-size: 12px; font-weight: 800; }
.pro-badge:hover { color: var( --on-sky ); }
.pro-badge[hidden] { display: none; }
.pro-badge.ended { background: rgba( 245, 196, 81, 0.15 ); color: #f8dc94; }
#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( --mint ); }
#save[data-state="wait"] .save-wait, #save[data-state="full"] .save-full { display: inline; color: #f8dc94; }
.pv-nofile { align-self: center; font-size: 12px; color: var( --text-3 ); }
.pv-nofile[hidden], #pv-open[hidden] { display: none; }
.saved { margin-top: 18px; border-radius: 20px; background: var( --card ); border: 1px solid rgba( 106, 168, 255, 0.25 ); padding: 16px; }
.saved[hidden] { display: none; }
.saved > b { font-size: 14px; }
.saved ul { display: grid; gap: 6px; margin: 10px 0 8px; padding: 0; list-style: 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; color: inherit; font: inherit; cursor: pointer; }
.saved-open:hover { border-color: var( --edge ); }
.saved-open b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-open small, .saved > small { display: block; font-size: 12px; color: var( --text-3 ); }