/* !••• Functional Styles ••• */

.hidden {
	display: none !important;
}

/* !••• iOS App ••• */
body.iOSApp .iOSAppNope,
body.iOSApp #navbar .loggedOut,
body.iOSApp.loggedOut #navbar {
	display: none !important;
}

body.iOSApp.loggedOut {
	padding-bottom: var(--safe-area-inset-bottom) !important;
}

/* !•• People •• */

/* !Default */
.person .selectable,
.person input.name,
.person .newItemCount,
.person .color,
.person button.delete,
.person button.edit,
.person button.cancel {
	display: none;
}

/* !New */
.person.new.editing button.delete,
.person.new.selectable .selectable {
	display: none;
}

.person.new.editing button.cancel {
	display: inline;
}

/* !Selectable */
.person.selectable .selectable {
	display: inline;
}

.person.selectable .link {
	display: none;
}

/* !Item Count */
.person.newItemCount.newItemCountVisible .newItemCount {
	display: inline;
}

.person.editing.newItemCountVisible .newItemCount {
	display: none;
}

/* !Editable */
.person.editable button.edit {
	display: inline;
}

/* !Editing */
.person.editing .link,
.person.editing .newItemCount,
.person.editing .selectable {
	display: none;
}

.person.editing button.delete,
.person.editing input.name,
.person.editing label.color {
	display: inline;
}

/* !•• Add Person Buttons •• */

button.addPerson {
	margin: 10px;
	width: 140px;
	height: 140px;
	color: #aaa;
	background-color: transparent;
	border: dashed 2px;
}

button.addPerson:hover {
	color: var(--color-violet);
	border-color: var(--color-violet);
}

/* !•• Links •• */

/* !New */
.item.link.new .anchor,
.item.link.new button.status,
.item.link.new button.star,
.item.link.new .options,
.item.link.new .people,
.item.link.new button.done,
.item.link.new .buttons,
.item.link.new .titleInput {
	display: none;
}

/* !Unsaved */
.item.link.unsaved button.status,
.item.link.unsaved button.next,
.item.link.unsaved:not(.editing):not(.editingTitle) button.done,
.item.link.unsaved:not(.editingTitle) .titleInput {
	display: none;
}

/* !View */
.item.link.view .people,
.item.link.view button.next,
.item.link.view:not(.editing):not(.editingTitle) button.done,
.item.link.view .buttons,
.item.link.view:not(.editingTitle) .titleInput {
	display: none;
}

/* !Editing */
.item.link.unsaved.editing .options,
.item.link.view.editing .options {
	display: none;
}

/* !Editing Title */
.item.link.editingTitle .title,
.item.link.editingTitle .options {
	display: none;
}

/* !••• Aesthetic Styles ••• */

* {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: none;
}

/* !•• Variables •• */

:root {
	--color-violet: #6610a4;
	--color-violet-highlight: #8630c4;
	--color-violet-shadow: #3f0a65;
	--color-violet-transparent: rgba(79, 14, 141, 0.75);
	--color-yellow: #ffea0d;
	--color-orange: #ff9f40;
	--color-blue: #18b3ff;
	--color-blue-background: #127eb3;
	--color-blue-dark: #0d5c83;
	--color-red-background: #a22;
	
	--drop-shadow-normal: 0 2px 4px rgba(0,0,0,.35);
	
	--border-radius-normal: 8px;
	
	--navbar-icon-height: 32px;
	--navbar-label-height: 20px;
	--navbar-top-padding: 6px;
	--navbar-bottom-padding: 4px;
	--navbar-height: calc(var(--navbar-icon-height) + var(--navbar-label-height) + var(--navbar-top-padding) + var(--navbar-bottom-padding));
	
	/* Note: The safe area insets are primarally set as variables because env() doesn't always work in calc(). */
	
	/* Default safe area insets. */
	--safe-area-inset-top: 0px;
	--safe-area-inset-bottom: 0px;
	--safe-area-inset-left: 0px;
	--safe-area-inset-right: 0px;
}

/* iOS < 11.2 */
@supports (padding-top: constant(safe-area-inset-top)) {
	
	:root {
		--safe-area-inset-top: constant(safe-area-inset-top);
		--safe-area-inset-bottom: constant(safe-area-inset-bottom);
		--safe-area-inset-left: constant(safe-area-inset-left);
		--safe-area-inset-right: constant(safe-area-inset-right);
	}

}

/* iOS > 11.2 */
@supports (padding-top: env(safe-area-inset-top)) {
	
	:root {
		--safe-area-inset-top: env(safe-area-inset-top);
		--safe-area-inset-bottom: env(safe-area-inset-bottom);
		--safe-area-inset-left: env(safe-area-inset-left);
		--safe-area-inset-right: env(safe-area-inset-right);
	}
	
}

:root {
	--full-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
	--full-height-minus-navbar: calc(var(--full-height) - var(--navbar-height));
}

/* !•• Animations •• */

@keyframes loading {
	
	0% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
	}
	
}

/* !•• Fonts •• */
body {
	/* This is the default, which gets us the native system font pretty much everywhere, but doesn't support Dynamic Type on Apple Devices. Source: https://furbo.org/2018/03/28/system-fonts-in-css/ */
	font: 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	
	/* This will set both the font-family and font-size properties on Apple devices that support Dynamic Type. */
	font: -apple-system-body;
	
	line-height: 1.5;
	text-rendering: optimizeLegibility;
}

/* !•• General Styles •• */

*[disabled] {
	opacity: .5;
}

html,
body {
	margin: 0;
	padding: 0;
	background-color: white;
	min-height: var(--full-height);
}

body {
	background-image: url('/images/star-bg.svg');
	background-repeat: no-repeat;
	background-position-y: var(--safe-area-inset-top);
	background-size: 5rem;
	padding-top: var(--safe-area-inset-top);
	padding-left: var(--safe-area-inset-left);
	padding-right: var(--safe-area-inset-right);
}

body.standalone {
	background-image: none;
}

body.standalone header,
body.standalone #navbar,
body.standalone #add .tools,
body.standalone footer {
	display: none;
}

body.home {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

#staging {
	position: fixed;
	bottom: 1em;
	right: 2.5em;
	color: maroon;
	background-color: yellow;
	text-align: center;
	font-weight: bold;
	padding: .5em 1em;
	border-radius: var(--border-radius-normal);
	opacity: .5;
	z-index: 20000;
	transform: translateX(50%) rotate(-45deg);
	width: 20em;
	transition: opacity .25s ease-in-out;
}

#staging:hover {
	opacity: 0;
}

h3,
h4,
h5,
h6 {
	margin-top: 1.5em;
	margin-bottom: .5em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.25em;
}

h6 {
	font-size: 1.1em;
}

kbd {
	border: solid 1px;
	border-radius: calc(var(--border-radius-normal) / 2);
	border-bottom-width: 2px;
	padding: .1em .25em;
	font-family: inherit;
	background-color: #fafafa;
}

input,
button,
select {
	font-size: inherit;
}

button,
p.button a {
	background-color: var(--color-violet);
	color: white;
	border: none;
	border-radius: var(--border-radius-normal);
	padding: .75em 1em;
	font-weight: bold;
}

p.button {
	text-align: center;
}

p.button a {
	text-decoration: none;
	display: inline-block;
}

p.bookmarklet a {
	display: inline-block;
	border-style: solid;
	border-width: 1px 1px 3px;
	padding: .25em .5em;
	border-radius: var(--border-radius-normal);
	text-decoration: none;
}

p.bookmarklet a:hover {
	text-decoration: underline;
}

aside.note {
	color: #770;
	background-color: #ffd;
	padding: 1em;
	border-radius: 0 var(--border-radius-normal) var(--border-radius-normal) 0;
	border-left: solid .5em #ffa;
}

aside.note p:first-child {
	margin-top: 0;
}

aside.note p:last-child {
	margin-bottom: 0;
}

/* !•• Header •• */

header {
	margin: 1rem;
	position: relative;
}
	
header h1 {
	margin: 0;
	padding: 0;
	text-indent: -999em;
	width: 1px;
	height: 1px;
}

header #title {
	margin: 0;
	padding: 0;
	font-size: 2.5rem;
}

/* !• Back Button • */

body.backButtonVisible #title {
	margin-left: .75em;
}

body.backButtonVisible #back {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-47%);
	background-color: transparent;
	background-image: url('/images/back.svg');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1.5em;
	text-indent: -999em;
	width: 2.5em;
	height: 3.5em;
	cursor: pointer;
}
	
/* !•• Nav Bar •• */

/* 

The nav bar has four states:

Home Page:
	Compact: position: sticky at the bottom.
	Normal: position: sticky at the top.

Other Pages:
	Compact: position: fixed at the bottom.
	Normal: position: fixed at the top.

We don't keep it sticky everywhere because it bounces with the page scroll.  Having sticky on the home page for the cool scroll effect vs. fixed everywhere else is the best tradeoff.

*/

#navbar nav {
	display: none;
}

body.loggedIn #navbar nav.loggedIn,
body.loggedOut #navbar nav.loggedOut {
	display: block;
}

#content {
	display: flex;
	flex-direction: column;
	min-height: var(--full-height);
	padding-bottom: 1rem;
}

body.home #navbar {
	position: -webkit-sticky;
	position: sticky;	
}

#navbar {
	position: fixed;
	z-index: 900;
	color: white;
	background-color: var(--color-violet);
}

#navbar a {
	color: white;
	text-decoration: none;
}

@media screen and (max-width: 599px) {
	
	body,
	#content {
		min-height: var(--full-height-minus-navbar);
	}
	
    /* Move everything above the navbar, which will be at the bottom of the screen. */
	#content header,
	#content main,
	#content footer {
		order: -1;
	}
	
	#navbar {
		margin-top: auto;
		width: 100%;
		bottom: 0;
		border-top: solid 1px var(--color-violet-highlight);
		padding-bottom: var(--safe-area-inset-bottom);
	}
	
	body {
		padding-bottom: calc(var(--navbar-height) + var(--safe-area-inset-bottom));
	}
	
	body.home,
	body.standalone {
		padding-bottom: 0;
	}
	
}

@media screen and (min-width: 600px) {
	
	body.home #navbar {
		margin-left: auto;
		margin-top: 1rem;
		margin-right: 1rem;
	}
	
	#navbar {
		z-index: 900;
		top: 1rem;
		top: calc(var(--safe-area-inset-top) + 1rem);
		right: 1rem;
		right: calc(var(--safe-area-inset-right) + 1rem);
		width: 260px;
		border-radius: var(--border-radius-normal);
		overflow: hidden;
		box-shadow: var(--drop-shadow-normal);
	}
	
	#title {
		margin-right: 270px !important;
	}
	
	body {
		padding-bottom: var(--safe-area-inset-bottom);
	}
	
}

/* Background Gradient */
#navbar nav::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 33.333%;
	top: 0;
	background: radial-gradient(circle at 50% 35%, var(--color-violet-highlight) 0, var(--color-violet) 75%, var(--color-violet) 100%);
	z-index: 901;
	transform: translate(100%);
	transition: transform .25s ease-in-out;
}

#navbar ul {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 902;
}

#navbar li {
	flex-grow: 1;
}

/* The total height specified here (rows + padding) must match the bottom margin applied to the body above. */
#navbar li a {
	display: grid;
	grid-template-rows: var(--navbar-icon-height) var(--navbar-label-height);
	justify-items: center;
	align-items: center;
	padding: var(--navbar-top-padding) 0 var(--navbar-bottom-padding);
}

#navbar ul li span {
	font-size: 0.9em;
	font-weight: normal;
}

#peopleIcon .eyes .left,
#peopleIcon .eyes .right,
#peopleIcon .mouth {
	transform: translateX(0px);
	transition: transform .25s ease-in-out;
}

/* Look to the Left */
body.add #peopleIcon .eyes .left {
	transform: translateX(-3px);
}

body.add #peopleIcon .eyes .right {
	transform: translateX(-4px);
}

body.add #peopleIcon .mouth {
	transform: translateX(-2px);
}

/* Look to the Right */
body.more #peopleIcon .eyes .left {
	transform: translateX(4px);
}

body.more #peopleIcon .eyes .right {
	transform: translateX(3px);
}

body.more #peopleIcon .mouth {
	transform: translateX(2px);
}

/* Background Gradient Animation */

body.add #navbar nav.loggedIn::after,
#navbar nav.loggedOut::after {
	transform: translate(0%);
}

body.people #navbar nav.loggedIn::after,
body.signup #navbar nav.loggedOut::after {
	transform: translate(100%);
}

body.more #navbar nav.loggedIn::after,
body.login #navbar nav.loggedOut::after {
	transform: translate(200%);
}

/* !•• !Errors •• */

.error {
	color: #900;
}

#error {
	position: fixed;
	top: 32px;
	top: calc(32px + var(--safe-area-inset-top));
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-red-background);
	color: white;
	padding: .5em 1em;
	border-radius: var(--border-radius-normal);
	box-shadow: var(--drop-shadow-normal);
	border: solid #600 1px;
	z-index: 1000;
}

#error button {
	position: absolute;
	font-size: 0.8em;
	top: -1em;
	left: -1em;
	height: 2em;
	width: 2em;
	border-radius: 2em;
	background-color: white;
	border: solid #900 2px;
	font-weight: bold;
	color: #900;
	padding: 0;
	box-shadow: var(--drop-shadow-normal);
}

/* !Loading */

#loading {
	position: fixed;
	top: -.25rem;
	top: calc(var(--safe-area-inset-top) + -.25rem);
	left: 50%;
	transform: translateX(-50%);
	font-size: 2rem;
	color: var(--color-violet);
	opacity: 1;
	transition: opacity .25s;
}

#loading span {
	opacity: 0;
	animation: loading .8s alternate infinite ease-in-out;
}

/* Delay the start of the animation just a bit so quick-loading stuff doesn't blink the loading indicator in a distracting way. */
#loading .one {
	animation-delay: .2s;
}

#loading .two {
	animation-delay: .4s;
}

#loading .three {
	animation-delay: .6s;
}

#loading.fade {
	opacity: 0;
}

/* !••• Person Components ••• */

/* !Default */
.person {
	margin: 10px;
	width: 140px;
	height: 140px;
	background-color: #555;
	border-radius: var(--border-radius-normal);
	position: relative;
}

.person,
.person a.link {
	color: white;
	text-decoration: none;
}

.person .name {
	font-weight: bold;
}

.person .link,
.person.selectable .selectable {
	display: flex;
	text-align: center;
	width: 100%;
	height: 85%;
	padding: 10px;
}

.person.selectable .selectable {
	height: 100%;
}

.person.selectable .selectable input.select {
	position: absolute;
	left: -100vw;
}

.person.selectable {
	background-image: url('/images/unchecked.svg');
	background-repeat: no-repeat;
	background-position: 10px 10px;
	background-size: 20px;
}

.person.selectable:not(.selected) {
	background-color: white !important;
	color: #777 !important;
	background-position: 8px 8px;
	border: solid #777 2px;
}

.person.selectable.selected {
	background-image: url('/images/checked.svg');
}

.person.selectable.editing {
	background-image: none;
}

.person .link .name,
.person.selectable .selectable .name {
	margin: auto;
}

.person .link .name,
.person input.name,
.person .selectable {
	font-size: 1.35rem;
	line-height: 1.3;	
}

.person .newItemCount {
	position: absolute;
	width: 2rem;
	height: 2rem;
	text-align: center;
	line-height: 2rem;
	top: -.5rem;
	right: -.5rem;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 10rem;
	color: white;
	background-color: var(--color-red-background);
	box-shadow: -1px 1px 3px rgba(0,0,0,.5);
}

/* !Selectable */

/* !Editable */

.person.editable:not(.editing) button.edit {
	margin: 0 auto;
	padding: 0;
	background: none;
	border-radius: 0;
	display: block;
	text-transform: uppercase;
	font-size: .7rem;
	opacity: .5;
}

/* !Editing */

.person.editing {
	display: grid;
	grid-template-areas: "nameInput nameInput" "color color" "delete edit";
	grid-template-rows: auto 2fr 1fr;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-items: center;
}

.person.new.editing {
	grid-template-areas: "nameInput nameInput" "color color" "cancel edit";
}

.person.editing input.name { grid-area: nameInput; }
.person.editing .color { grid-area: color; }
.person.editing button.delete { grid-area: delete; }
.person.editing button.cancel { grid-area: cancel; }
.person.editing button.edit { grid-area: edit; }

.person.editing input.name {
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	border-radius: calc(var(--border-radius-normal) / 2);
	padding: .25em .5em;
	width: calc(100% - 10px);
	align-self: start;
	margin: 5px;
	background-color: rgba(255,255,255,.75);
}

.person.editing input.name::-webkit-input-placeholder {
	color: rgba(0,0,0,0.5);
}

.person.editing input.name::-moz-placeholder {
	color: rgba(0,0,0,0.5);
}

.person.editing input.name:-ms-input-placeholder {
	color: rgba(0,0,0,0.5);
}

.person.editing input.name:-moz-placeholder {
	color: rgba(0,0,0,0.5);
}

.person.editing input.name::placeholder {
	color: rgba(0,0,0,0.5);
}

.person.editing .color {
	display: block;
	text-align: center;
	font-size: .8em;
	text-transform: uppercase;
	font-weight: bold;
	opacity: .75;
}

.person.editing input.hue {
	width: calc(100% - 10px);
	margin: 0;
	padding: 0;
}

.person.editing button.delete,
.person.editing button.cancel,
.person.editing button.edit {
	font-size: .9rem;
	margin: 0;
	padding: 0;
	align-self: stretch;
	justify-self: stretch;
	background-color: transparent;
	border-top: solid 1px rgba(0,0,0,0.25);
}

.person.editing button.delete,
.person.editing button.cancel {
	border-radius: 0 0 0 var(--border-radius-normal);
	color: rgba(255,255,255,0.75);
}

.person.editing button.edit {
	border-radius: 0 0 var(--border-radius-normal) 0;
	border-left: solid 1px rgba(0,0,0,0.25);
}

/* !••• People List ••• */

#peopleList,
.item .peopleList {
	display: grid;
	grid-template-columns: repeat(auto-fill, 160px);
	justify-content: space-evenly;
	justify-items: center;
}

/* !••• Items ••• */

.item {
	width: 320px;
	position: relative;
}

@keyframes linkLoading {
	
	0% {
		background-position: 100% center;
	}
	
	100% {
		background-position: 0% center;
	}
	
}

.item.new.loading::after {
	content: 'Loading...';
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	left: 10px;
	color: white;
	font-weight: bold;
	border-radius: var(--border-radius-normal);
	background-color: var(--color-violet);
	background-image: linear-gradient(to right, var(--color-violet-shadow), var(--color-violet-highlight), var(--color-violet-shadow), var(--color-violet-highlight));
	background-size: 300%;
	animation: 2s infinite linear linkLoading;
}

.item .anchor .description {
	display: none;
}

body.add .item {
	margin-left: auto;
	margin-right: auto;
}

.item .theLink {
	margin: 10px;
	color: #666;
	background-color: #eee;
	display: grid;
	align-items: center;
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius-normal);
	will-change: opacity;
}

.item button.status,
.item input.url,
.item select.options {
	color: #888;
}

body.people .item .theLink {
	box-shadow: var(--drop-shadow-normal);
}

body.people .item.justVisited .theLink {
	box-shadow: 0 8px 20px 8px rgba(0,0,0,.35);
}

.item .anchor { grid-area: anchor; }
.item button.status { grid-area: status; }
.item input.url { grid-area: url; }
.item .options { grid-area: options; }
.item .people { grid-area: people; }
.item button.next { grid-area: next; }
.item button.done { grid-area: done; }

.item.new .theLink {
	grid-template-areas: "url next";
	grid-template-columns: 1fr auto;
}

.item.unsaved .theLink,
.item.view .theLink {
	grid-template-areas: "anchor anchor" "url options";
	grid-template-columns: 1fr auto;
}

.item.unsaved.editing .theLink,
.item.view.editing .theLink,
.item.unsaved.editingTitle .theLink,
.item.view.editingTitle .theLink {
	grid-template-areas: "anchor anchor" "url done";
}

.item.statusNew .theLink,
.item.statusShared .theLink {
	grid-template-areas: "anchor anchor anchor" "status url options";
	grid-template-columns: auto 1fr auto;
}

.item input.url {
	-webkit-appearance: none;
	border: none;
	margin: 4px;
	padding: .25em 6px;
	border-radius: calc(var(--border-radius-normal) / 2);
	background-color: transparent;
	text-overflow: ellipsis;
	align-self: stretch;
}

.item.editing input.url {
	color: black;
	background-color: white;
	text-overflow: clip;
}

.item.editingTitle .titleInput {
	position: absolute;
	top: 157px;
	transform: translateY(-100%);
	left: 0;
	right: 0;
	z-index: 200;
	color: white;
	font-weight: bold;
	background-color: rgba(255,255,255,.35);
	padding: 5px 10px;
	border: none;
	outline: none;
}

.item.editingTitle .anchor::after {
	background-color: rgba(0,0,0,.75);
}

.item button.next,
.item button.done {
	width: 100%;
	height: 100%;
	border-radius: 0;
	padding: 0 .75em;
}

.item button.star {
	position: absolute;
	z-index: 102;
}

.item button.status {
	margin: 0;
	padding: 0 0 0 10px;
	min-width: 4em;
	font-size: .7rem;
	text-transform: uppercase;
	background-color: transparent;
	align-self: stretch;
	border-radius: calc(var(--border-radius-normal) / 1.5);
}

.item.statusNew button.status {
	margin: 4px 0 4px 4px;
	padding: .25em 6px;
	background-color: var(--color-red-background);
	color: white;
}

.item button.status[disabled] {
	opacity: 1;
}

.item button.star {
	top: 0;
	right: 0;
	border: none;
	margin: 0;
	padding: 0;
	text-indent: -999em;
	width: 44px;
	height: 44px;
	background-image: url('images/star-outlined.svg');
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: center center;
	background-color: transparent;
}

.item.starred button.star {
	background-image: url('images/star-filled.svg');
}

.item .anchor {
	height: 157px; /* 1.91:1 aspect ratio based on 300px width. */
	text-decoration: none;
	color: white;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}

.item .anchor::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .35);
	z-index: 101;
}

.item .anchor .title,
.item.editingTitle .titleInput {
	font-size: 1.25em;
	line-height: 1.3;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
	margin: 0;
}

.item .anchor .title {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 102;
	padding: 10px 10px 5px;
}

.item select.options {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 2em;
	border: none;
	background-color: transparent;
	margin: 0;
	padding: 0 0 2px;
}

.item .people h4 {
	margin: 1em 10px .25em;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.9em;
	opacity: 0.5;
}

.item .buttons {
	margin: 10px;
	text-align: right;
	overflow: auto;
}

.item .buttons button.cancel {
	float: left;
	background-color: #888;
}

.item .buttons button.save {
	float: right;
}

/* !•• Mostly Text Only Pages •• */

noscript,
#home .faq,
#more,
#feedback,
#apps,
#extensions,
#bookmarklet,
#signup,
#login,
#loginVerify,
#account,
#changelog,
#privacy,
#terms,
#add section.tools,
#notFound {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 38em;
}

/* !•• / (Home) •• */

body.home {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
}

body.home #intro {
	padding-top: var(--safe-area-inset-top);
}

body.home header {
	margin: 0;
}

body.home header h1,
body.home header h2 {
	display: none;
}

/* !• Intro • */

#intro {
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-color: black;
	background-image: url('/images/hero.jpg');
	background-repeat: no-repeat;
}

#intro .text {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
	color: white;
	padding: .5em 1em;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}

#intro .text h3 {
	background-image: url('/images/wagl-icon-rounded-512.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 2em;
	padding-left: 2.5em;
}

#intro .text h3 {
	display: flex;
	align-items: center;
	font-size: 1.4em;
	margin: 0 0 .5em 0;
	line-height: 1.2;
	min-height: 2em;
}

#intro .text p {
	margin: .5em 0;
	line-height: 1.4;
}

#intro .text p a {
	color: white;
	font-weight: bold;
}

@media screen and (orientation: portrait) {
	
	#intro {
		background-position: bottom center;
		background-size: auto 130%;
	}
	
	#intro .text {
		font-size: 5.5vw;
		bottom: 0;
		width: 100%;
		padding-top: 30%;
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.75) 100%);
	}
	
}

@media screen and (orientation: landscape) {
	
	#intro {
		background-position: center right;
		background-size: 130% auto;
	}
	
	#intro .text {
		font-size: 2vw;
		width: 50%;
		padding-left: 15%;
		padding-right: 1em;
		padding-right: calc(1em + var(--safe-area-inset-right));
		background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 30%, rgba(0,0,0,.75) 100%);
		right: 0;
		height: 100%;
	}
}

/* !• Steps • */

#home .steps {
	padding-left: var(--safe-area-inset-left);
	padding-right: var(--safe-area-inset-right);
}

#home .steps ol,
#home .steps li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#home .steps li a {
	color: inherit;
	text-decoration: none;
}

#home .steps li a:hover {
	text-decoration: underline;
}

#home .steps ol {
	counter-reset: steps;
}

#home .steps li {
	counter-increment: steps;
	position: relative;
}

#home .steps li,
#home .steps li a {
	display: block;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	font-weight: bold;
	text-align: center;
}

#home .steps li::before {
	content: counter(steps);
	position: absolute;
	color: white;
	background-color: var(--color-violet);
	top: 4%;
	left: 4%;
	transform: rotate(-12deg);
	border: solid white .25em;
	border-radius: 10em;
	width: 1.75em;
	height: 1.75em;
	line-height: 1.75em;
}

#home .steps li a {
	background-image: url('/images/step-signup.jpg');
}

#home .steps li:nth-child(2) {
	background-image: url('/images/step-save.jpg');
}

#home .steps li:nth-child(3) {
	background-image: url('/images/step-share.jpg');
}

@media screen and (max-width: 599px) {
	
	#home .steps li {
		margin: 8vw auto;
		width: 80vw;
	}
	
	#home .steps li a,
	#home .steps li:nth-child(2),
	#home .steps li:nth-child(3) {
		padding-top: 80vw;
	}
	
	#home .steps li,
	#home .steps li a {
		font-size: 7.5vw;
	}
	
	#home .steps li::before {
		font-size: 9vw;
	}
	
}

@media screen and (min-width: 600px) {
	
	#home .steps ol {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		justify-items: center;
		margin: 5vw 2vw;
	}
	
	#home .steps li,
	#home .steps li a {
		font-size: 2.5vw;
	}
	
	#home .steps li::before {
		font-size: 3vw;
	}
	
	#home .steps li a,
	#home .steps li:nth-child(2),
	#home .steps li:nth-child(3) {
		width: 28vw;
		padding-top: 28vw;
	}
	
}

/* !• Peeps • */

#home .peeps {
	margin: 3em 6vw;
}

#home .peeps h3 {
	text-align: center;
}

#home .peeps ul {
	column-width: 8em;
	line-height: 1.75;
}

/* !• Features • */

#home .feature {
	background-repeat: no-repeat;
	margin-left: var(--safe-area-inset-left);
	margin-right: var(--safe-area-inset-right);
}

#home .feature h3 {
	margin-top: 0;
	margin-bottom: 0;
}

#home .feature p {
	color: #666;
	margin-top: .5em;
	margin-bottom: 0;
}

#home .feature.devices {
	background-image: url('/images/tour-devices.png');
}

#home .feature.grouped {
	background-image: url('/images/tour-grouped.png');
}

#home .feature.select {
	background-image: url('/images/tour-select.png');
}

#home .feature.organization {
	background-image: url('/images/tour-organization.png');
}

#home .feature.stars {
	background-image: url('/images/tour-stars.png');
}

@media screen and (max-width: 599px) {
	
	#home .feature {
		background-size: 100% auto;
		margin-top: 10vw;
		margin-bottom: 10vw;
		padding-top: 60vw;
		padding-left: 6vw;
		padding-right: 6vw;
	}
	
	#home .peeps h3,
	#home .feature h3 {
		font-size: 8vw;
	}
	
	#home .peeps ul,
	#home .feature p {
		font-size: 4.5vw;
	}
	
}

@media screen and (min-width: 600px) {
	
	#home .feature {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 35vw;
		margin-top: 5vw;
		margin-bottom: 5vw;
		background-size: auto 100%;
	}
	
	#home .peeps h3,
	#home .feature h3 {
		font-size: 2.5vw;
	}
	
	#home .peeps ul,
	#home .feature p {
		font-size: 1.5vw;
	}
	
	#home .feature.devices,
	#home .feature.select,
	#home .feature.stars {
		background-position: right center;
	}
	
	#home .feature.devices h3,
	#home .feature.devices p,
	#home .feature.select h3,
	#home .feature.select p,
	#home .feature.stars h3,
	#home .feature.stars p {
		margin-left: 5vw;
		margin-right: 65vw;
	}
	
	#home .feature.grouped,
	#home .feature.organization {
		background-position: left center;
	}
	
	#home .feature.grouped h3,
	#home .feature.grouped p,
	#home .feature.organization h3,
	#home .feature.organization p {
		margin-left: 65vw;
		margin-right: 5vw;
	}

}

/* !• Uses • */

#home .use {
	position: relative;
	background-repeat: no-repeat;
}

#home .use p {
	color: white;
	font-weight: bold;
	padding: .5em 1em;
}

#home .use.talk {
	background-image: url('/images/talk.jpg');
}

#home .use.smile {
	background-image: url('/images/smile.jpg');
}

#home .use.point {
	background-image: url('/images/point.jpg');
}

#home .use.hold {
	background-image: url('/images/hold.jpg');
}

#home .use.laugh {
	background-image: url('/images/laugh.jpg');
}

@media screen and (max-width: 599px) {
	
	#home .use {
		margin: 10vw 0;
		width: 100vw;
		padding-top: 56.25%; /* Same aspect ratio as the images: 1:.5625 */
		background-color: var(--color-violet);
		background-position: top center;
		background-size: contain;
	}
	
	#home .use p {
		font-size: 4.5vw;
		margin: 0;
		text-align: center;
	}
	
}

@media screen and (min-width: 600px) {
	
	#home .use {
		margin: 5vw auto;
		width: 72vw;
		height: 40.5vw; /* Same aspect ratio as the images: 1:.5625 */
		background-position: center center;
		background-size: cover;
	}
	
	#home .use p {
		position: absolute;
		font-size: 2vw;
		max-width: 14em;
		background-color: var(--color-violet-transparent);
	}
	
	#home .use.talk {
		transform: translateX(-2%) rotate(-2deg);
		box-shadow: -1px 2px 10px #aaa;
	}
	
	#home .use.talk p {
		transform: translateY(-50%) rotate(6deg);
		top: 55%;
		right: -10%;	
	}
	
	#home .use.smile {
		transform: translateX(-2%) rotate(1deg);
		box-shadow: 1px 2px 10px #aaa;
	}
	
	#home .use.smile p {
		transform: translateY(-50%) rotate(-4deg);
		top: 30%;
		right: -10%;	
	}
	
	#home .use.point {
		transform: translateX(2%) rotate(2deg);
		box-shadow: 1px 2px 10px #aaa;
	}
	
	#home .use.point p {
		transform: translateY(-50%) rotate(-6deg);
		top: 60%;
		left: -10%;	
	}
	
	#home .use.hold {
		transform: translateX(2%) rotate(-1deg);
		box-shadow: -1px 2px 10px #aaa;
	}
	
	#home .use.hold p {
		transform: translateY(-50%) rotate(4deg);
		top: 25%;
		left: -10%;	
	}
	
	#home .use.laugh {
		transform: translateX(-2%) rotate(-2deg);
		box-shadow: -1px 2px 10px #aaa;
	}
	
	#home .use.laugh p {
		transform: translateY(-50%) rotate(12deg);
		top: 20%;
		right: -10%;	
	}
	
}

/* !• Sign Up •*/

#home .signup {
	color: white;
	background-color: var(--color-violet);
	text-align: center;
}

#home .signup h3,
#home .signup p {
	margin: 0;
	padding: 0;
}

#home .signup h3 {
	font-size: 1.25em;
	font-weight: normal;
}

#home .signup a {
	color: white;
	background-color: var(--color-violet-highlight);
	text-decoration: none;
	font-size: 1.25em;
	font-weight: bold;
	display: inline-block;
	margin: 1em 0;
	padding: .25em .75em;
	transition: background .25s ease-in-out;
}

#home .signup a:hover {
	background-color: var(--color-violet-shadow);
}

#home .signup .details {
	font-size: 1em;
}

@media screen and (max-width: 599px) {
	
	#home .signup {
		font-size: 4.5vw;
		padding-top: 7.5vw;
		padding-bottom: 7.5vw;
		padding-left: 6vw;
		padding-right: 6vw;
		padding-left: calc(6vw + var(--safe-area-inset-left));
		padding-right: calc(6vw + var(--safe-area-inset-right));
	}
	
	#home .signup a {
		border-radius: 3vw;
	}
	
}

@media screen and (min-width: 600px) {
	
	#home .signup {
		font-size: 1.5vw;
		padding-top: 2vw;
		padding-bottom: 2vw;
		padding-left: 2vw;
		padding-right: 2vw;
		padding-left: calc(2vw + var(--safe-area-inset-left));
		padding-right: calc(2vw + var(--safe-area-inset-right));
	}
	
	#home .signup a {
		border-radius: 1vw;
	}

}

/* !• FAQ • */

@media screen and (max-width: 599px) {
	
	#home .faq {
		font-size: 4.5vw;
	}
		
}

@media screen and (min-width: 600px) {
	
	#home .faq {
		font-size: 1.5vw;
	}
	
}

#home .faq h3 {
	font-size: 2em;
}

#home .faq dt {
	font-weight: bold;
	color: white;
	background-color: var(--color-violet);
	margin-top: 3em;
	padding: .25em .5em .25em 2em;
	border-radius: .5em .5em 0 0;
}

#home .faq dt::before {
	content: 'Q: ';
	color: white;
	opacity: .5;
	margin-left: -1.5em;
	float: left;
}

#home .faq dd {
	margin: 0;
	padding: .25em .5em .25em 2em;
	overflow: auto;
}

#home .faq dd::before {
	content: 'A: ';
	color: var(--color-violet);
	margin-top: 1em;
	margin-left: -1.5em;
	float: left;
	font-weight: bold;
}

/* !•• Sign Up & Log In •• */

body.signup,
body.login,
body.loginVerify {
	color: white;
	background-color: var(--color-violet);
}

body.signup #title,
body.login #title,
body.loginVerify #title {
	text-shadow: 1px 1px 0 var(--color-violet-shadow);
}

body.signup a,
body.login a,
body.loginVerify a {
	color: white;
}

body.signup button,
body.login button,
body.loginVerify button {
	background-color: var(--color-violet-highlight);
}

body.signup #navbar,
body.login #navbar,
body.loginVerify #navbar {
	box-shadow: none;
}

@media screen and (max-width: 599px) {
	
	body.signup footer,
	body.login footer,
	body.loginVerify footer {
		display: none;
	}
	
}

@media screen and (min-width: 600px) {

	body.signup #navbar nav::after,
	body.login #navbar nav::after,
	body.loginVerify #navbar nav::after {
		display: none;
	}

}

#signup,
#login,
#loginVerify .codeEntry {
	text-align: center;
}

#signup input[type=email],
#login input[type=email],
#loginVerify input[type=text] {
	-webkit-appearance: none;
	width: 100%;
	max-width: 16em;
	margin: .5em 0;
	padding: .25em .35em;
	border: solid #ddd 1px;
	border-radius: var(--border-radius-normal);
	font-size: 1.4em;
}

#loginVerify .verificationCodeLabel {
	font-weight: bold;
}

#loginVerify input#verificationCode {
	width: 6em;
	text-align: center;
}

#loginVerify .rememberMeInfoButton {
	padding: 0;
	border-radius: 3em;
	width: 1.5em;
	height: 1.5em;
	margin-left: .25em;
}

#loginVerify .helpButton {
	background-color: transparent;
	padding: 0;
	text-decoration: underline;
	font-weight: normal;
	border-radius: 0;
	cursor: pointer;
}

/* !•• /people •• */

#person .items {
	display: grid;
	grid-template-columns: repeat(auto-fill, 320px);
	justify-content: space-evenly;
	justify-items: center;
	align-items: start;
}

#person button.more {
	justify-self: stretch;
	align-self: stretch;
	margin: 10px;
	min-height: 180px;
	font-size: 1.5em;
	font-weight: normal;
	color: #aaa;
	background: transparent;
	border: dotted 3px;
}

#person button.more:hover {
	border: double 3px;
}

/* !•• /more •• */

#more {
	max-width: 400px;
}

body.loggedOut #more ul.loggedIn {
	display: none;
}

#more ul,
#more li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#more ul {
	display: grid;
	margin: 1em auto;
	border: solid 1px var(--color-violet);
	border-radius: var(--border-radius-normal);
	overflow: hidden;
}

#more li {
	display: flex;
}

#more a {
	color: var(--color-violet);
	text-decoration: none;
	border: solid 1px var(--color-violet);
	border-width: 0 0 1px 0;
	padding: .5em 1em;
	display: flex;
	align-items: center;
	width: 100%;
	font-weight: bold;
}

#more li:last-child a {
	border: none;
}

#more a:hover {
	color: white;
	background-color: var(--color-violet-highlight);
}

#more a:active {
	color: white;
	background-color: var(--color-violet-shadow);
}

/* !•• /feedback •• */

#feedback {
	text-align: center;
}

#feedback input[type=email],
#feedback textarea {
	-webkit-appearance: none;
	border: solid #ccc 1px;
	border-radius: var(--border-radius-normal);
	width: 100%;
	padding: .4em .5em;
	font-size: 1.2em;
}

#feedback textarea {
	min-height: 10em;
}

/* !•• /apps •• */

#apps img {
	max-width: 100%;
}

#apps ol,
#apps ol li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#apps ol {
	counter-reset: stepCounter;
}

#apps ol li {
	counter-increment: stepCounter;
}

#apps ol li::before {
	content: counter(stepCounter);
	display: block;
	font-size: 2em;
	font-weight: bold;
	color: #bbb;
	margin: 0 1rem;
	grid-area: number;
}

#apps ol li img {
	grid-area: image;
	border-radius: var(--border-radius-normal);
	box-shadow: var(--drop-shadow-normal);
	margin: 1em;
}

#apps ol li span {
	grid-area: text;
	padding: 1em 1em 1em 0;
}

#apps ol li {
	display: grid;
	margin: 1em 0;
	background: #f8f8f8;
	border-radius: var(--border-radius-normal);
	overflow: hidden;
	align-items: center;
}

#apps ol li {
	grid-template-columns: auto 1fr;
	grid-template-areas: "number text";
}

#apps ol li.smallImage {
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "number text image";
}

#apps ol li.largeImage {
	grid-template-columns: auto 1fr;
	grid-template-areas: "number text" "image image";
	justify-items: center;
}

/* !•• /extensions •• */

#extensions a.chrome,
#extensions a.firefox {
	display: block;
	text-align: center;
	color: #666;
	text-decoration: none;
	font-size: 1.2em;
	font-weight: bold;
	margin: 2em 0;
}

#extensions a.chrome:hover,
#extensions a.firefox:hover {
	text-decoration: underline;
}

#extensions a.chrome::before,
#extensions a.firefox::before {
	display: block;
	margin: 0 auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-bottom: .5em;
}

#extensions a.chrome::before {
	content: '';
	background-image: url('/images/extensions-chrome.png');
	height: 3.5em;
}

#extensions a.firefox::before {
	content: '';
	background-image: url('/images/extensions-firefox.svg');
	height: 4em;
}

/* !•• /bookmarklet •• */

#bookmarklet p.bookmarklet {
	text-align: center;
}

/* !•• /add •• */

#add {
	align-self: center;
}

@keyframes fadein {
	
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	
	100% {
		opacity: 1;
		transform: scale(1);
	}
	
}

body.standalone.saved::after {
	content: '\2713  Saved';
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: -100px;
	bottom: -100px;
	left: -100px;
	right: -100px;
	background-color: rgba(255,255,255,0.75);
	color: var(--color-violet);
	font-size: 2em;
	font-weight: bold;
	animation: .25s ease-in-out fadein;
	-webkit-backdrop-filter: blur(10px) saturate(2);
	backdrop-filter: blur(10px);
}

body.standalone #add .item .buttons {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	background-color: white;
	padding-top: 10px;
	border-top: solid #eee 1px;
	padding: 10px;
}

body.standalone #add {
	padding-bottom: 5rem;
}

#add section.tools p:first-child {
	text-align: center;
	font-size: 1.2em;
}

#add section.tools p.bookmarklet {
	text-align: center;
}

/* !•• /person/:id •• */

#person .tools {
	margin: 0 1rem;
}

#person #shareMode small {
	display: inline-block; /* Without this the line height is too large, as it can't be smaller than its parent element's line height. */
}

#person nav.more {
	margin: 1rem;
	text-align: center;
}

/* !•• /privacy •• */

#privacy table {
	border-collapse: collapse;
}

#privacy table th {
	background-color: #eee;
}

#privacy table th,
#privacy table td {
	border: solid 1px #ccc;
	padding: .5em;
}

/* !••• Footer ••• */

footer {
	font-size: .9em;
	padding: 2em 1em;
	text-align: center;
	opacity: .65;
	margin-top: auto;
}

footer p {
	opacity: .65;
}

footer a {
	color: inherit;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

footer nav ul,
footer nav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer nav ul li {
	display: inline-block;
	margin: .25em 1em;
}