/**
 * Highlights on the reader. The colours are the app's "soft wash" set, its default for a new
 * install (`ColorTheme.softWashInk`), light and dark, so a mark looks the same on the web.
 */

.fwapp {
	--fwapp-hl-orange: light-dark( #FFD9A8, #773928 );
	--fwapp-hl-yellow: light-dark( #FBF3A8, #684324 );
	--fwapp-hl-green: light-dark( #C6EDC1, #375232 );
	--fwapp-hl-blue: light-dark( #C0E4F7, #3D4586 );
	--fwapp-hl-purple: light-dark( #E3D0F5, #633E65 );
}

.fwapp-hl-orange { --fwapp-hl: var( --fwapp-hl-orange ); }
.fwapp-hl-yellow { --fwapp-hl: var( --fwapp-hl-yellow ); }
.fwapp-hl-green { --fwapp-hl: var( --fwapp-hl-green ); }
.fwapp-hl-blue { --fwapp-hl: var( --fwapp-hl-blue ); }
.fwapp-hl-purple { --fwapp-hl: var( --fwapp-hl-purple ); }

.fwapp-text .fwapp-hl {
	background: var( --fwapp-hl );
	cursor: pointer;
	border-radius: 2px;
}

/* The space after a word that runs on into the same mark is filled, so a mark reads as one band. */
.fwapp-text .fwapp-hl-join { box-shadow: .32em 0 0 var( --fwapp-hl ); }

/* --- Overlapping marks, as stripes (`HighlightBands`, Jerry's choice from a mockup) ------------
 * Each mark on a word is an equal horizontal band of its own colour, newest on top, at most three
 * (`HighlightBudget.maximumDrawnLayers`), with hard edges so no third colour appears where two meet.
 * A mark with nothing under it is drawn exactly as before. The underline rule and a tap are the top
 * mark's; the sheet names the others. */
.fwapp-l2-orange { --fwapp-hl2: var( --fwapp-hl-orange ); }
.fwapp-l2-yellow { --fwapp-hl2: var( --fwapp-hl-yellow ); }
.fwapp-l2-green { --fwapp-hl2: var( --fwapp-hl-green ); }
.fwapp-l2-blue { --fwapp-hl2: var( --fwapp-hl-blue ); }
.fwapp-l2-purple { --fwapp-hl2: var( --fwapp-hl-purple ); }
.fwapp-l3-orange { --fwapp-hl3: var( --fwapp-hl-orange ); }
.fwapp-l3-yellow { --fwapp-hl3: var( --fwapp-hl-yellow ); }
.fwapp-l3-green { --fwapp-hl3: var( --fwapp-hl-green ); }
.fwapp-l3-blue { --fwapp-hl3: var( --fwapp-hl-blue ); }
.fwapp-l3-purple { --fwapp-hl3: var( --fwapp-hl-purple ); }
.fwapp-text .fwapp-hl.fwapp-layers-2 { background: linear-gradient( to bottom, var( --fwapp-hl ) 0 50%, var( --fwapp-hl2 ) 50% 100% ); }
.fwapp-text .fwapp-hl.fwapp-layers-3 { background: linear-gradient( to bottom, var( --fwapp-hl ) 0 33.34%, var( --fwapp-hl2 ) 33.34% 66.67%, var( --fwapp-hl3 ) 66.67% 100% ); }
/* A shadow is one colour, so striped words join across the space with a sliver of their own stripes. */
.fwapp-text .fwapp-hl-join.fwapp-layers-2,
.fwapp-text .fwapp-hl-join.fwapp-layers-3 { box-shadow: none; position: relative; }
.fwapp-text .fwapp-hl-join.fwapp-layers-2::after,
.fwapp-text .fwapp-hl-join.fwapp-layers-3::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: .32em; background: inherit; }
html.fwapp-hl-pending .fwapp-text .fwapp-hl::after { display: none; }

/* The bar: at the foot of the screen, clear of iOS's own menu beside the selection. */
.fwapp-hl-bar,
.fwapp-hl-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var( --fwapp-surface );
	color: var( --fwapp-ink );
	border-top: 1px solid var( --fwapp-rule );
	box-shadow: 0 -4px 16px rgba( 0, 0, 0, .14 );
	padding: 10px 12px calc( 10px + env( safe-area-inset-bottom ) );
}

.fwapp-hl-bar { display: grid; grid-template-columns: repeat( 3, 1fr ); align-items: center; gap: 8px; }

.fwapp-hl-bar[hidden],
.fwapp-hl-sheet[hidden] { display: none; }

.fwapp-hl-bar[data-error]::after { content: attr( data-error ); font-size: 14px; color: var( --fwapp-accent ); }

/* 44px, the app's smallest target (app §14); the small swatches beside names below are labels, not buttons. */
.fwapp-swatch {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var( --fwapp-rule );
	background: var( --fwapp-hl );
	padding: 0;
	cursor: pointer;
	flex: none;
}

.fwapp-swatch[aria-pressed="true"] { border-color: var( --fwapp-ink ); box-shadow: 0 0 0 2px var( --fwapp-surface ) inset; }

.fwapp-hl-action,
.fwapp-hl-sheet-actions button {
	font: inherit;
	font-weight: 600;
	padding: 9px 14px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-page );
	color: var( --fwapp-ink );
	cursor: pointer;
}

.fwapp-hl-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fwapp-hl-color .fwapp-swatch { width: 20px; height: 20px; border-width: 1px; }
.fwapp-hl-prompt { grid-column: 2 / -1; }

.fwapp-hl-prompt { font-size: 15px; }

.fwapp-hl-sheet-colors { display: flex; gap: 10px; margin: 0 0 12px; }

.fwapp-hl-note-label { display: block; font-weight: 600; margin: 0 0 4px; }

.fwapp-hl-sheet textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-page );
	color: var( --fwapp-ink );
	margin: 0 0 10px;
}

/* The sheet's Notebook menu, drawn like its note field rather than as the browser's own control. */
.fwapp-hl-sheet select {
	font: inherit;
	min-height: 44px;
	padding: 8px 10px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-page );
	color: var( --fwapp-ink );
}

.fwapp-hl-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.fwapp-hl-sheet .fwapp-primary { background: var( --fwapp-panel ); border-color: var( --fwapp-panel ); color: #F8F8F8; }

.fwapp-hl-sheet .fwapp-destructive { color: light-dark( #A3150F, #F28B82 ); border-color: currentColor; background: transparent; }

.fwapp-hl-status { margin: 8px 0 0; font-size: 14px; color: var( --fwapp-ink-muted ); min-height: 1em; }

/* Room so the last line is never under the bar. */
.fwapp .fwapp-reader { padding-bottom: 120px; }

/* Your Highlights & Notes. */

.fwapp-hl-section { border-top: 1px solid var( --fwapp-rule ); margin: 24px 0 0; padding: 16px 0 0; }

.fwapp-hl-section select {
	flex: 1;
	min-width: 0;
	font: inherit;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var( --fwapp-rule );
	background: var( --fwapp-surface );
	color: var( --fwapp-ink );
}

.fwapp-order { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }

.fwapp-order a {
	border: 1px solid var( --fwapp-rule );
	border-radius: 999px;
	padding: 4px 14px;
	text-decoration: none;
	color: var( --fwapp-ink-muted );
}

.fwapp-order a[aria-current] { background: var( --fwapp-panel ); border-color: var( --fwapp-panel ); color: #F8F8F8; }

.fwapp-order .fwapp-order-flip { font-size: 1.1rem; padding: 2px 12px; }

.fwapp-marks { list-style: none; margin: 0; padding: 0; }

.fwapp-mark {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var( --fwapp-rule );
}

.fwapp-mark p { margin: 0 0 4px; }

.fwapp-mark-swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; margin-top: .45em; background: var( --fwapp-hl ); }

.fwapp-mark-where { font-weight: 600; }

.fwapp-mark-where a { text-decoration: none; }

.fwapp-mark-words { background: var( --fwapp-hl ); padding: 2px 6px; border-radius: 4px; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; line-height: 1.7; }

.fwapp-mark-note { margin-top: 6px !important; white-space: normal; }

.fwapp-mark-when { font-size: .85rem; }

/* The sheet, in the app's order: the layer, the colours, Notebook and Marked, the note, the actions. */
.fwapp-hl-sheet { max-height: 85vh; overflow: auto; }
.fwapp-hl-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.fwapp-hl-sheet-layer { margin: 0; font-weight: 600; }
.fwapp-hl-sheet-head button { min-height: 44px; }
.fwapp-hl-sheet-facts { display: grid; gap: 6px; margin: 0 0 12px; }
.fwapp-hl-fact { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.fwapp-hl-fact select { flex: 1; min-height: 44px; }
.fwapp-hl-sheet-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
@media ( min-width: 560px ) { .fwapp-hl-sheet-actions { grid-template-columns: 1fr 1fr; } }
.fwapp-hl-sheet-actions button[hidden] { display: none; }
.fwapp-hl-sheet-actions button { min-height: 44px; text-align: left; }
.fwapp-hl-others { display: grid; gap: 6px; margin-top: 12px; }
.fwapp-hl-others p { margin: 0; }
.fwapp-hl-others .fwapp-swatch { width: 18px; height: 18px; border-width: 1px; }

/* What The Colors Mean Here: each name beside its colour. */
.fwapp-color-names .fwapp-swatch { display: inline-block; width: 18px; height: 18px; border-width: 1px; vertical-align: middle; }

/* --- Highlighter Set (`ColorTheme.markerInk`, `fluorescentInk`; Soft Wash is the default above) -- */
html.fwapp-ink-marker .fwapp {
	--fwapp-hl-orange: light-dark( #FFC46B, #853D28 ); --fwapp-hl-yellow: light-dark( #FBEF6A, #744823 );
	--fwapp-hl-green: light-dark( #A8E6A3, #3A5A34 ); --fwapp-hl-blue: light-dark( #9DD6F5, #414B98 );
	--fwapp-hl-purple: light-dark( #D3B3F0, #6E4371 );
}
html.fwapp-ink-fluorescent .fwapp {
	--fwapp-hl-orange: light-dark( #FFB03B, #8D3F28 ); --fwapp-hl-yellow: light-dark( #F7ED4A, #7A4B22 );
	--fwapp-hl-green: light-dark( #86E27C, #3C5F35 ); --fwapp-hl-blue: light-dark( #71C7F2, #444FA1 );
	--fwapp-hl-purple: light-dark( #C79BEF, #744577 );
}

/* --- Underline Highlights (`ColorTheme.highlightRules`): Always, Never, or Automatic — on when the
 * device asks for more contrast, as the app follows Increase Contrast. */
.fwapp-hl-orange { --fwapp-hl-rule: light-dark( #9C4718, #F0A07A ); }
.fwapp-hl-yellow { --fwapp-hl-rule: light-dark( #7A6500, #E0C070 ); }
.fwapp-hl-green { --fwapp-hl-rule: light-dark( #2E6B34, #8FD283 ); }
.fwapp-hl-blue { --fwapp-hl-rule: light-dark( #14567F, #ADBAF9 ); }
.fwapp-hl-purple { --fwapp-hl-rule: light-dark( #5B2E86, #D9A5DC ); }
html.fwapp-rule-always .fwapp-text .fwapp-hl {
	text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var( --fwapp-hl-rule );
}
@media ( prefers-contrast: more ) {
	html:not( .fwapp-rule-never ) .fwapp-text .fwapp-hl {
		text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var( --fwapp-hl-rule );
	}
}

/* Sort Order's pills keep their look, with a tap area 44px tall (app §14). */
.fwapp-order a { position: relative; }
.fwapp-order a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY( -50% ); }