/*
Visual identity of the journal.
The reference is the wall label of a museum: a small spaced caps eyebrow,
an accession number set in a typewriter face, a serif name, and a great deal
of quiet space around them. Ultramarine is the only accent, and it is spent
on the accession numbers and on the single action that matters.
*/

:root
	{
	--paper:		#E7E8E2;
	--card:			#FCFBF8;
	--ink:			#16232B;
	--ink-soft:		#5D6A74;
	--rule:			#C6C9C0;
	--accent:		#1F3FA8;
	--accent-soft:		#E1E6F6;
	--danger:		#8E2C21;

	--font-body:		-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--font-display:		ui-serif, "New York", Georgia, "Times New Roman", serif;
	--font-mono:		ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--bar-height:		56px;
	--tab-height:		58px;
	--gutter:		20px;
	}

*
	{
	box-sizing: border-box;
	}

/*
The hidden attribute wins over every display rule in this file.
The browser hides such an element through its own [hidden] rule, which any rule
written here beats: .sheet below sets display flex, so without this the sheet
stood on screen from the first paint, greyed the application out, and its Close
button appeared to do nothing because turning the attribute back on changed
nothing. Anything hidden by attribute in a screen added later is covered too.
*/
[hidden]
	{
	display: none !important;
	}

html, body
	{
	margin:		0;
	padding:	0;
	}

body
	{
	background:		var(--paper);
	color:			var(--ink);
	font-family:		var(--font-body);
	font-size:		16px;
	line-height:		1.45;
	-webkit-font-smoothing:	antialiased;
	overscroll-behavior-y:	none;
	}

body.is-sheet-open
	{
	overflow: hidden;
	}

/*
The bar at the top holds the wordmark and one line saying where the data stands.
*/
.app-bar
	{
	position:		fixed;
	inset:			0 0 auto 0;
	z-index:		30;
	display:		flex;
	align-items:		baseline;
	justify-content:	space-between;
	gap:			12px;
	height:			calc(var(--bar-height) + env(safe-area-inset-top));
	padding:		env(safe-area-inset-top) var(--gutter) 0;
	background:		var(--paper);
	border-bottom:		1px solid var(--rule);
	}

.wordmark
	{
	margin:			0;
	font-family:		var(--font-display);
	font-size:		21px;
	letter-spacing:		-0.01em;
	}

.wordmark span
	{
	color: var(--accent);
	}

.app-status
	{
	margin:			0;
	font-size:		11px;
	text-transform:		uppercase;
	letter-spacing:		0.11em;
	color:			var(--ink-soft);
	}

/*
The scrolling area holding whichever screen is current.
*/
.view
	{
	padding:	calc(var(--bar-height) + env(safe-area-inset-top) + 18px) var(--gutter)
			calc(var(--tab-height) + env(safe-area-inset-bottom) + 120px);
	max-width:	720px;
	margin:		0 auto;
	}

.eyebrow
	{
	margin:			0;
	font-size:		10.5px;
	font-weight:		600;
	text-transform:		uppercase;
	letter-spacing:		0.13em;
	color:			var(--ink-soft);
	}

.ref
	{
	margin:			0 0 6px;
	font-family:		var(--font-mono);
	font-size:		11px;
	letter-spacing:		0.04em;
	color:			var(--accent);
	}

.mono
	{
	font-family: var(--font-mono);
	}

/*
The day separator, ruled on both sides of the date.
*/
.day-rule
	{
	display:	flex;
	align-items:	center;
	gap:		12px;
	margin:		30px 0 14px;
	font-family:	var(--font-body);
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.13em;
	color:		var(--ink-soft);
	}

.day-rule::after
	{
	content:	"";
	flex:		1;
	height:		1px;
	background:	var(--rule);
	}

/*
One visit, presented as a catalogue entry.
*/
.visit-card
	{
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	16px 16px 18px;
	margin:		0 0 12px;
	cursor:		pointer;
	}

.visit-card:active
	{
	background: var(--accent-soft);
	}

.visit-card h3
	{
	margin:		2px 0 6px;
	font-family:	var(--font-display);
	font-size:	21px;
	font-weight:	500;
	line-height:	1.2;
	}

.visit-address
	{
	margin:		8px 0 0;
	font-size:	14px;
	color:		var(--ink-soft);
	}

.visit-comment
	{
	margin:		10px 0 0;
	font-size:	15px;
	white-space:	pre-wrap;
	}

.thumb-strip
	{
	display:		flex;
	gap:			6px;
	margin-top:		12px;
	overflow-x:		auto;
	-webkit-overflow-scrolling: touch;
	}

.thumb-strip img
	{
	width:		72px;
	height:		72px;
	object-fit:	cover;
	flex:		0 0 auto;
	border:		1px solid var(--rule);
	}

/*
The empty journal, which is an invitation rather than an apology.
*/
.empty-state
	{
	border:		1px solid var(--rule);
	border-left:	3px solid var(--accent);
	background:	var(--card);
	padding:	22px 18px;
	}

.empty-lead
	{
	margin:		10px 0 0;
	font-family:	var(--font-display);
	font-size:	19px;
	line-height:	1.35;
	}

.empty
	{
	color:		var(--ink-soft);
	font-size:	15px;
	padding:	18px 0;
	}

/*
The one action that matters, set as a stamped block above the tabs.
*/
.checkin-bar
	{
	position:	fixed;
	left:		0;
	right:		0;
	bottom:		calc(var(--tab-height) + env(safe-area-inset-bottom));
	z-index:	25;
	padding:	10px var(--gutter) 12px;
	background:	linear-gradient(to top, var(--paper) 72%, rgba(231, 232, 226, 0));
	}

.checkin-button
	{
	display:	block;
	width:		100%;
	max-width:	680px;
	margin:		0 auto;
	padding:	14px 16px;
	background:	var(--ink);
	color:		var(--paper);
	border:		none;
	outline:	1px solid var(--ink);
	outline-offset:	3px;
	font-family:	inherit;
	text-align:	left;
	cursor:		pointer;
	transition:	transform 120ms ease, background 120ms ease;
	}

.checkin-button:active
	{
	transform:	scale(0.985);
	background:	var(--accent);
	outline-color:	var(--accent);
	}

.checkin-label
	{
	display:	block;
	font-size:	15px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.15em;
	}

.checkin-sub
	{
	display:	block;
	margin-top:	3px;
	font-size:	11.5px;
	letter-spacing:	0.02em;
	opacity:	0.66;
	}

/*
The four screens of the application.
*/
.tabs
	{
	position:	fixed;
	inset:		auto 0 0 0;
	z-index:	30;
	display:	grid;
	grid-template-columns: repeat(4, 1fr);
	height:		calc(var(--tab-height) + env(safe-area-inset-bottom));
	padding-bottom:	env(safe-area-inset-bottom);
	background:	var(--card);
	border-top:	1px solid var(--rule);
	}

.tab
	{
	appearance:	none;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

.tab.is-current
	{
	color:		var(--accent);
	box-shadow:	inset 0 2px 0 var(--accent);
	}

/*
Forms, shared by the editor and the settings.
*/
.field
	{
	display:	block;
	margin:		0 0 14px;
	}

.field > .eyebrow
	{
	display:	block;
	margin-bottom:	5px;
	}

input[type="text"],
input[type="url"],
input[type="date"],
input[type="search"],
input[type="password"],
input[type="datetime-local"],
select,
textarea
	{
	width:		100%;
	padding:	11px 12px;
	font-family:	inherit;
	font-size:	16px;
	color:		var(--ink);
	background:	var(--card);
	border:		1px solid var(--rule);
	border-radius:	0;
	appearance:	none;
	}

textarea
	{
	resize: vertical;
	}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible
	{
	outline:	2px solid var(--accent);
	outline-offset:	1px;
	}

.button
	{
	appearance:	none;
	display:	inline-block;
	width:		100%;
	padding:	12px 14px;
	font-family:	inherit;
	font-size:	12px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink);
	background:	var(--card);
	border:		1px solid var(--ink);
	cursor:		pointer;
	}

.button-primary
	{
	color:		var(--paper);
	background:	var(--accent);
	border-color:	var(--accent);
	}

.button-danger
	{
	color:		var(--danger);
	border-color:	var(--danger);
	background:	transparent;
	}

.sheet-actions
	{
	display:	grid;
	gap:		8px;
	margin-top:	18px;
	}

.checkline
	{
	display:	flex;
	align-items:	center;
	gap:		9px;
	font-size:	14px;
	margin:		4px 0 14px;
	}

.checkline input
	{
	width:	18px;
	height:	18px;
	}

/*
The sheet, used for checking in and for editing a visit.
*/
.sheet
	{
	position:	fixed;
	inset:		0;
	z-index:	60;
	display:	flex;
	align-items:	flex-end;
	}

.sheet-backdrop
	{
	position:	absolute;
	inset:		0;
	background:	rgba(22, 35, 43, 0.42);
	}

.sheet-panel
	{
	position:	relative;
	width:		100%;
	max-width:	720px;
	margin:		0 auto;
	max-height:	88vh;
	display:	flex;
	flex-direction:	column;
	background:	var(--paper);
	border-top:	3px solid var(--ink);
	animation:	rise 180ms ease-out;
	}

@keyframes rise
	{
	from	{ transform: translateY(14px); opacity: 0.4; }
	to	{ transform: translateY(0); opacity: 1; }
	}

.sheet-head
	{
	display:		flex;
	align-items:		center;
	justify-content:	space-between;
	padding:		14px var(--gutter) 10px;
	border-bottom:		1px solid var(--rule);
	}

.sheet-head h2
	{
	margin:		0;
	font-family:	var(--font-display);
	font-size:	19px;
	font-weight:	500;
	}

.sheet-close
	{
	appearance:	none;
	border:		none;
	background:	none;
	font-family:	inherit;
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink-soft);
	cursor:		pointer;
	}

.sheet-body
	{
	padding:	16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
	overflow-y:	auto;
	}

.sheet-lead
	{
	margin:		0 0 14px;
	font-family:	var(--font-display);
	font-size:	18px;
	line-height:	1.35;
	}

.sheet-foot
	{
	margin:		14px 0 0;
	font-size:	12px;
	color:		var(--ink-soft);
	}

.candidate-list
	{
	display:	grid;
	gap:		1px;
	background:	var(--rule);
	border:		1px solid var(--rule);
	margin-bottom:	14px;
	}

.candidate
	{
	appearance:	none;
	display:	block;
	width:		100%;
	text-align:	left;
	padding:	11px 13px;
	background:	var(--card);
	border:		none;
	font-family:	inherit;
	cursor:		pointer;
	}

.candidate:active
	{
	background: var(--accent-soft);
	}

.candidate-name
	{
	display:	block;
	font-family:	var(--font-display);
	font-size:	17px;
	}

.candidate-meta
	{
	display:	block;
	margin-top:	2px;
	font-size:	11px;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	color:		var(--ink-soft);
	}

.spinner
	{
	width:		22px;
	height:		22px;
	margin:		6px 0 4px;
	border:		2px solid var(--rule);
	border-top-color: var(--accent);
	border-radius:	50%;
	animation:	spin 720ms linear infinite;
	}

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

/*
Photographs inside the editor.
*/
.photo-grid
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			6px;
	margin-bottom:		10px;
	}

.photo-cell
	{
	position:	relative;
	aspect-ratio:	1;
	border:		1px solid var(--rule);
	background:	var(--card);
	}

.photo-cell img
	{
	width:		100%;
	height:		100%;
	object-fit:	cover;
	display:	block;
	}

.photo-missing
	{
	display:	grid;
	place-items:	center;
	height:		100%;
	font-size:	11px;
	color:		var(--ink-soft);
	text-align:	center;
	padding:	6px;
	}

.photo-remove
	{
	position:	absolute;
	inset:		auto 0 0 0;
	appearance:	none;
	border:		none;
	background:	rgba(22, 35, 43, 0.78);
	color:		var(--paper);
	font-family:	inherit;
	font-size:	9.5px;
	text-transform:	uppercase;
	letter-spacing:	0.1em;
	padding:	4px 0;
	cursor:		pointer;
	}

/*
The map screen.
*/
.map-tools
	{
	margin-bottom: 12px;
	}

.map-canvas
	{
	height:		52vh;
	min-height:	260px;
	border:		1px solid var(--rule);
	background:	var(--card);
	}

.map-list
	{
	display:	grid;
	gap:		1px;
	background:	var(--rule);
	border:		1px solid var(--rule);
	border-top:	none;
	}

.map-row
	{
	appearance:		none;
	display:		flex;
	align-items:		baseline;
	justify-content:	space-between;
	gap:			12px;
	width:			100%;
	padding:		11px 13px;
	background:		var(--card);
	border:			none;
	font-family:		var(--font-display);
	font-size:		16px;
	text-align:		left;
	cursor:			pointer;
	}

/*
The document screen, which is also what the printer receives.
*/
.doc-tools
	{
	border:		1px solid var(--rule);
	background:	var(--card);
	padding:	16px;
	margin-bottom:	22px;
	}

.doc-range
	{
	display:		grid;
	grid-template-columns:	1fr 1fr;
	gap:			10px;
	}

.doc-sheet
	{
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	26px 20px 30px;
	}

.doc-head
	{
	border-bottom:	2px solid var(--ink);
	padding-bottom:	14px;
	margin-bottom:	8px;
	}

.doc-head h1
	{
	margin:		6px 0 4px;
	font-family:	var(--font-display);
	font-size:	26px;
	font-weight:	500;
	line-height:	1.15;
	}

.doc-count
	{
	margin:		0;
	font-family:	var(--font-mono);
	font-size:	11px;
	color:		var(--accent);
	}

.doc-day
	{
	margin:		26px 0 12px;
	font-family:	var(--font-body);
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.13em;
	color:		var(--ink-soft);
	border-bottom:	1px solid var(--rule);
	padding-bottom:	5px;
	}

.doc-entry
	{
	break-inside:	avoid;
	margin:		0 0 20px;
	}

.doc-entry h3
	{
	margin:		2px 0 5px;
	font-family:	var(--font-display);
	font-size:	19px;
	font-weight:	500;
	}

.doc-comment
	{
	margin:		9px 0 0;
	font-size:	15px;
	white-space:	pre-wrap;
	}

.doc-photos
	{
	display:		grid;
	grid-template-columns:	repeat(3, 1fr);
	gap:			6px;
	margin-top:		12px;
	}

.doc-photos img
	{
	width:		100%;
	aspect-ratio:	4 / 3;
	object-fit:	cover;
	border:		1px solid var(--rule);
	}

/*
The settings screen.
*/
.panel
	{
	background:	var(--card);
	border:		1px solid var(--rule);
	padding:	18px 16px;
	margin-bottom:	16px;
	}

.panel-lead
	{
	margin:		8px 0 16px;
	font-size:	14px;
	color:		var(--ink-soft);
	}

.facts
	{
	display:		grid;
	grid-template-columns:	auto 1fr;
	gap:			6px 16px;
	margin:			12px 0 0;
	font-size:		14px;
	}

.facts dt
	{
	font-size:	10.5px;
	font-weight:	600;
	text-transform:	uppercase;
	letter-spacing:	0.12em;
	color:		var(--ink-soft);
	padding-top:	3px;
	}

.facts dd
	{
	margin: 0;
	}

/*
The short confirmation shown after a change.
*/
.toast
	{
	position:	fixed;
	left:		50%;
	bottom:		calc(var(--tab-height) + env(safe-area-inset-bottom) + 84px);
	z-index:	80;
	transform:	translate(-50%, 8px);
	margin:		0;
	padding:	9px 16px;
	background:	var(--ink);
	color:		var(--paper);
	font-size:	12px;
	text-transform:	uppercase;
	letter-spacing:	0.11em;
	opacity:	0;
	pointer-events:	none;
	transition:	opacity 180ms ease, transform 180ms ease;
	}

.toast.is-visible
	{
	opacity:	1;
	transform:	translate(-50%, 0);
	}

@media (prefers-reduced-motion: reduce)
	{
	*
		{
		animation-duration:	0.001ms !important;
		transition-duration:	0.001ms !important;
		}
	}

/*
What the printer sees: the document alone, on white, with no interface.
*/
@media print
	{
	.no-print
		{
		display: none !important;
		}

	body
		{
		background: #FFFFFF;
		}

	.view
		{
		padding:	0;
		max-width:	none;
		}

	.doc-sheet
		{
		border:		none;
		background:	transparent;
		padding:	0;
		}

	.doc-photos
		{
		grid-template-columns: repeat(4, 1fr);
		}
	}