/* Shared styles for the landing page and the form. Deliberately minimal — the visual design
   is a task of its own. */

:root {
	color-scheme: light dark;
	--line: rgba(127, 127, 127, .45);
	--muted: rgba(127, 127, 127, 1);
	--accent: #2c9d4b;
	--danger: #c33;
	--special: #c9a227;
}

body {
	font: 15px/1.6 system-ui, sans-serif;
	margin: 2rem auto;
	max-width: 46rem;
	padding: 0 1rem 4rem;
}

h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; opacity: .65; margin: 1.8rem 0 .6rem; }
p { margin: 0 0 .8rem; }
.muted { color: var(--muted); font-size: .9rem; }

button, .button {
	font: inherit;
	padding: .45rem .9rem;
	margin: 0 .4rem .4rem 0;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
button:hover, .button:hover { border-color: currentColor; }
button.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
button.danger, .danger { border-color: var(--danger); color: var(--danger); }
button:disabled { opacity: .45; cursor: default; }

input[type="text"], input[type="number"], select, textarea {
	font: inherit;
	padding: .4rem .5rem;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: transparent;
	color: inherit;
}
input:invalid { border-color: var(--danger); }
label { display: inline-block; }

.field { margin-bottom: .9rem; }
.field > label { display: block; margin-bottom: .25rem; font-size: .9rem; opacity: .8; }
.field input[type="text"], .field textarea { width: 100%; box-sizing: border-box; }

.card {
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: .8rem 1rem;
	margin-bottom: .7rem;
}
.card h3 { margin: 0 0 .2rem; font-size: 1rem; }
.card .meta { color: var(--muted); font-size: .85rem; margin-bottom: .6rem; }
.card .actions { margin-top: .6rem; }

.reminder { margin-top: .8rem; }

.message { border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; margin: 1rem 0; }
.message.error { border-color: var(--danger); }
.message.success { border-color: var(--accent); }

.share { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.share input { flex: 1 1 22rem; font-family: ui-monospace, monospace; font-size: .82rem; }

details { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .9rem; margin-bottom: .9rem; }
details summary { cursor: pointer; font-size: .9rem; }
details .grid { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; margin-top: .8rem; align-items: center; }
details input { width: 6rem; }

#cases { list-style: none; padding: 0; margin: 0 0 .6rem; }
#cases li { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
#cases li input[type="text"] { flex: 1; }
#cases li label { font-size: .85rem; white-space: nowrap; color: var(--special); }