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

.hidden {
	display: none !important;
}

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

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

/* !•• Account ••  */
#account:not(.subscribed):not(.subscribe) .subscribe,
#account:not(.subscribed):not(.subscribe) .subscribed,
#account.subscribed .subscribe,
#account.subscribe .subscribed {
	display: none;
}

#billingInfoEntry:not(.card):not(.paymentRequest) .paymentMethod,
#billingInfoEntry.card #paymentRequestButtonContainer,
#billingInfoEntry.paymentRequest #cardEntryContainer {
	display: none;
}

body.loggedIn #home section.signup {
	display: none;
}

/* !•• 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);
}

button.addPerson span {
	transition: opacity .75s;
}

button.addPerson span.textInvisible {
	opacity: 0;
}

/* !•• 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;
}

/* !•• 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;
	--color-gray: #707070;
	--color-light-gray: #c0c0c0;
	
	--gradient-violet: linear-gradient(var(--color-violet-highlight), var(--color-violet-shadow));
	--gradient-violet-from-top: linear-gradient(to bottom, var(--color-violet-highlight), var(--color-violet-shadow));
	--gradient-violet-from-top-right: linear-gradient(to left bottom, var(--color-violet-highlight), var(--color-violet-shadow));
	
	--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 •• */

html {
	/* 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;
	-webkit-text-size-adjust: 100%;
			text-size-adjust: 100%;
}

/* !•• 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.initial,
body.home,
body.standalone {
	background-image: none;
}

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

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

body footer {
	display: none;
}

body.home footer {
	display: block;
}

#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;
	line-height: 1.2;
}

h3 {
	font-size: 1.75em;
}

h4,
h5,
h6 {
	font-weight: normal;
}

h4 {
	font-size: 1.5em;
}

h5 {
	font-size: 1.25em;
}

h6 {
	font-size: 1.1em;
}

hr {
	border: 0;
	border-bottom: solid 1px;
	opacity: .25;
}

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;
}

.sectionIntro {
	font-size: 1.25em;
}

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);
}

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

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

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

@media screen and (max-width: 640px) {
	
	body,
	#content {
		min-height: var(--full-height-minus-navbar);
	}
	
	body.standalone,
	body.standalone #content {
		min-height: var(--full-height);
	}
	
    /* 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: 641px) {
	
	body.home #navbar {
		margin-left: auto;
		margin-top: -2.25rem;
		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');
}

/* This after pseudo element is used to preload the checked SVG. */
.person.selectable::after {
	content: '';
	width: 0;
	height: 0;
	background-image: url('/images/checked.svg');
	visibility: hidden;
}

.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,
#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;
}

#home {
	margin-top: -2rem;
}

#home section {
	margin: 2rem 0;
	padding: 0 6vw;
}

#home h3 {
	font-size: 2rem;
	margin: 4vw 0;
	color: var(--color-gray);
}

/* !• Intro • */

#intro h3,
#intro .tagline {
	text-align: center;
}

#intro .text p.summary {
	background-image: url('/images/wagl-icon-rounded-512.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
}

@media screen and (max-width: 640px) {
	
	#intro {
		margin-bottom: 2rem;
	}

	#intro h3 {
		color: white;
		background-color: var(--color-violet);
		background-image: url('/images/hero.png'), var(--gradient-violet-from-top-right);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: 90%, cover;
		margin: 0;
		padding: 8vw 4vw 90vw;
		font-size: 8vw;
		line-height: 1.2;
	}
	
	#intro .text {
		padding: 0 6vw;
		font-size: 4vw;
	}
	
	#intro .text p.summary {
		margin: 2rem 0 1rem;
		padding-left: 22vw;
	}
	
}

@media screen and (min-width: 641px) {
	
	#intro {
		display: grid;
		grid-template-areas: 'h3' 'text';
		grid-template-rows: 1fr auto;
		color: white;
		background-color: var(--color-violet);
		background-image: url('/images/hero.png'), var(--gradient-violet-from-top-right);
		background-position: bottom 0 right 5vw, center center;
		background-repeat: no-repeat;
		background-size: auto 40vw, cover;
		margin: 0;
		padding: 8vw 50vw 8vw 4vw;
		min-height: 42vw;
	}
	
	#intro h3 {
		grid-area: h3;
		align-self: end;
		font-size: 4vw;
		line-height: 1.2;
	}
	
	#intro .text {
		grid-area: text;
		align-self: start;
		justify-self: center;
		width: 300px;
	}
	
	#intro .text p.summary {
		padding-left: 80px;
	}
	
	#intro .text p.tagline {
		
	}

}

/* !• How it Works • */

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

#home .how ol {
	counter-reset: how-counter;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 2rem;
	gap: 2rem;
	margin-top: 1.25rem;
}

#home .how ol li::before {
	content: counter(how-counter);
	counter-increment: how-counter;
	display: block;
	font-size: 1.5rem;
	line-height: 1.5em;
	width: 1.5em;
	height: 1.5em;
	border-radius: 1.5em;
	text-align: center;
	font-weight: bold;
	color: white;
	background-color: var(--color-violet);
	float: left;
}

#home .how ol li {
	max-width: 20em;
}

#home .how h4 {
	font-size: 1.35rem;
	font-weight: bold;
	margin: 0;
	margin-top: .25rem;
	margin-bottom: .25rem;
	line-height: 1.2;
}

#home .how p {
	color: var(--color-gray);
	margin: 0;
}

#home .how h4,
#home .how p {
	margin-left: 3rem;
}

@media screen and (max-width: 800px) {
	
	#home .how ol {
		grid-template-columns: 1fr;
		justify-items: left;
	}
	
	#home .how ol li {
		max-width: 40em;
	}
	
}

/* !• Save & Share Anywhere • */

#home .anywhere .devices {
	display: grid;
	align-items: center;
	grid-gap: 1rem;
	gap: 1rem;
}

#home .anywhere .devices img {
	width: 100%;
}

@media screen and (max-width: 640px) {
	
	#home .anywhere .devices {
		grid-template-rows: auto auto;
	}
	
}

@media screen and (min-width: 641px) {
	
	#home .anywhere .devices {
		grid-template-columns: 20em 1fr;
	}
	
}

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

#home .anywhere ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 4rem 0 2rem;
}

#home .anywhere ul li {
	display: grid;
	grid-template-rows: 80px auto;
	grid-gap: 1rem;
	gap: 1rem;
	justify-items: center;
	width: 9.5rem;
	margin: .5rem;
}

#home .anywhere ul li img {
	align-self: center;
}

#home .anywhere ul li p {
	align-self: start;
	text-align: center;
	margin: 0;
}

/* !• Signup/Create Account • */

#home .signup {
	background-color: var(--color-violet);
	background-image: var(--gradient-violet-from-top);
	text-align: center;
	padding: 1.5rem 4vw;
}

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

#home .signup .form {
	display: grid;
	grid-template-columns: 1fr auto;
}

#home .signup .form input,
#home .signup .form button {
	margin: 0;
	border: none;
	border-bottom: solid .25em var(--color-violet-shadow);
}

#home .signup .form input {
	-webkit-appearance: none;
	width: 100%;
	padding: .75em 0 .75em .75em;
	border-radius: var(--border-radius-normal) 0 0 var(--border-radius-normal);
	font-family: inherit;
	font-size: inherit;
}

#home .signup .form button {
	-webkit-appearance: none;	
	padding: .75em;
	border-radius: 0 var(--border-radius-normal) var(--border-radius-normal) 0;
	background-color: var(--color-violet-highlight);
	min-width: 10em;
}

@media screen and (max-width: 960px) {
	
	#home .signup .form {
		max-width: 26em;
		margin: 1.25rem auto .75rem;
	}
	
	#home .signup .details {
		margin: 0 auto;
		max-width: 19em;
	}

}

@media screen and (min-width: 961px) {
	
	#home .signup {
		display: grid;
		grid-template-areas: "header form" "details form";
		grid-template-columns: 1fr 1fr;
		grid-column-gap: 3vw;
	}
	
	#home .signup h3 {
		grid-area: header;
	}
	
	#home .signup .details {
		grid-area: details;
		text-align: center;
		margin-top: .5rem;
	}
	
	#home .signup .form {
		grid-area: form;
		align-self: center;
		max-width: 28em;
		width: 100%;
		margin: auto;
	}
	
}

/* !• Benefits • */

#home .benefits {
	margin: 4vw 0;
}

#home .benefits ul,
#home .benefits li,
#home .benefits h4,
#home .benefits p  {
	list-style: none;
	margin: 0;
	padding: 0;
}

#home .benefits ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	justify-content: center;
	grid-gap: 2rem;
	gap: 2rem;
}

#home .benefits ul li {
	display: grid;
	grid-template-areas: "icon header" ". description";
	grid-template-rows: auto 1fr;
}

#home .benefits ul li img {
	grid-area: icon;
	height: 1.75em;
	margin-right: .75rem;
}

#home .benefits ul li h4 {
	grid-area: header;
	font-weight: bold;
	font-size: 1.5rem;
	color: var(--color-violet);
}

#home .benefits ul li p {
	grid-area: description;
	color: var(--color-gray);
}

/* !• Indie • */

#home .indie img {
	display: block;
	width: 256px;
	margin: 4vw auto;
}

#home .indie p {
	max-width: 30em;
	margin-left: auto;
	margin-right: auto;
}

/* !•• 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: 640px) {
	
	body.signup footer,
	body.login footer,
	body.loginVerify footer {
		display: none;
	}
	
}

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

	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;
}

/* !•• /account •• */

#account #subscriptionStatus {
	font-size: 1.25em;
}

#account .cardLabel,
#account .buttonContainer {
	text-align: center;
}

#account .stripe {
	margin: 1em 0;
	text-align: center;
}

#account .stripe #cardEntryContainer,
#account .stripe #cardElement {
	margin: 1em 0;
	padding: .5em 1em;
	border-radius: var(--border-radius-normal);		
}

#account .stripe #cardEntryContainer {
	border: solid #eee 1px;
	background-color: #fafafa;
	padding: 0 1em;
}

#account .stripe #cardElement {
	border: solid #ddd 1px;
	background-color: #fff;
}

#account .stripe #cardErrors {
	color: #d81e24;
}

#paymentRequestButton.applePay {
	background-image: url('/images/apple-pay-subscribe.png');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 212px;
	height: 38px;
	border-radius: var(--border-radius-normal);
	text-indent: -999em;
}

#account span.card {
	display: inline-block;
	background-image: url('/images/billing/card.png');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 32px;
	padding-left: 38px;
	min-height: 24px;
	line-height: 24px;
}

#account span.card.american-express {
	background-image: url('/images/billing/american-express.png');
}

#account span.card.diners-club {
	background-image: url('/images/billing/diners-club.png');
}

#account span.card.discover {
	background-image: url('/images/billing/discover.png');
}

#account span.card.jcb {
	background-image: url('/images/billing/jcb.png');
}

#account span.card.mastercard {
	background-image: url('/images/billing/mastercard.png');
}

#account span.card.visa {
	background-image: url('/images/billing/visa.png');
}

#account #paymentMethodToggleButton {
	background-color: transparent;
	color: inherit;
	font-weight: normal;
	border-bottom: dotted 1px;
	padding: 0;
	border-radius: 0;
	opacity: 0.5;
	font-size: .9em;
	cursor: pointer;
	transition: opacity 1s;
}

/* !•• /people •• */

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

#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;
}

#person .nothing {
	padding: 0 1em;
	text-align: center;
	color: #888;
}

#person .nothing h3 {
	color: #aaa;
}

/* !•• /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 ul li a:hover {
	color: white;
	background-color: var(--color-violet-highlight);
}

#more ul li 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 #appsSelection,
#apps #appsSelection li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#apps #appsSelection {
	margin: 1em 0;
}

#apps .app {
	border-top: solid 1px rgba(0,0,0,.25);
	margin-top: 3.5em;
}

#apps .app .details {
	font-style: italic;
}

#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;
}

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

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

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

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

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

#apps 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 {
	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 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 4rem 0 2rem;
}

footer nav ul li {
	margin: 1em;
}