@charset "utf-8";

/* Color Definitions */
:root
{       
	--white: #fff;
	--lightest: #eee;
	--light: #ccc;
	--mid: #999;
	--dark: #666;
	--darkest: #333;
	--black: #000000;
	--purple: #7800FF;
	--yellow: #ffca10;
}

@supports (color: color(display-p3 1 1 1 / 1))
{
	:root
	{
		--purple: color(display-p3 0.47 0 1 / 1);
		--yellow: color(display-p3 1 0.8 0.25 / 1);
	}
}

/* Colors */

:root
{
	--page-bg: var(--lightest);
	--card-bg: var(--white);
	--button-bg: var(--accent);
	--input-bg: var(--card-bg);
	--text: var(--darkest);
	--input-text: var(--text);
	--button-text: var(--text);
	--subtle: var(--dark);
	--interactive: var(--purple);
	--accent: var(--yellow);
	--negative: var(--accent);
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--page-bg: var(--darkest);
		--card-bg: var(--black);
		--text: var(--lightest);
		--subtle: var(--light);
		--interactive: var(--yellow);
		--accent: var(--purple);
	}
}

*
{
	box-sizing: border-box;
}

header,footer,nav,main,section,figure,article,aside
{
	display: block;
}

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

body
{
	margin: 0 auto;
	padding: 0 5rem;
	background-color: var(--page-bg);
	color: var(--text);
	font-family: "Chrono", sans-serif;
	max-width: 100rem;
}

header.pageheader
{
	margin: 4rem auto;
	display: grid;
	grid-template-columns: auto auto;
}



div.logo a,
h1,
h2
{
	letter-spacing: -0.05em;
	font-weight: 300;
	line-height: 1;
}


div.logo
{
	display: grid;
	grid-template-columns: 2.5em 1fr;
	align-items: center;
	justify-items: start;
	line-height: 1;
	font-size: 0.8em;
}

div.logo a
{
	text-decoration: none;
	color: inherit;
	font-size: 2em;
	line-height: 1;
}

div.logo:before
{
	content: "";
	width: 2em;
	height: 2em;
	display: inline-block;
	background-image: url("//signserver.panic.com/get/svg");
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	top: -0.125em;
}

div.sign-in
{
	align-self: center;
	justify-self: end;
}

h1,
h2
{
	margin: 1em auto 0.25em auto;
	font-size: 2em;
}

h1,
h2,
a
{
	color: var(--interactive);
}

a.button
{
	display: inline-block;
	font-weight: 600;
	margin: 0.25em;
	font-size: 0.75em;
	border-radius: 1em;
	padding: 0.25em 1em;
	color: var(--button-text);
	background-color: var(--button-bg);
	text-decoration: none;
}

dd a.button
{
	margin: 0 0.5em;

}

a.minor
{
	font-size: 0.75em;
}

/* ---------------------- */
/*!---- Forms ---- */
/* ---------------------- */

form
{
	display: grid;
}

fieldset
{
	display: contents;
}

form p
{
	font-size: 1.2em;
	margin: 0 0 2rem 0;
}

input,
textarea,
select
{
	border: 0.4rem solid transparent;
	outline: 0;
	border-radius: 0.6rem;
	-webkit-appearance: none;
	font-size: 0.525em;
}

div.control-group label,
div.control-group input,
div.control-group select
{
	display: block;
	width: 100%;
	position: relative;
}

div.control-group label,
div.control-group select
{
	font-size: 0.85em;
	margin-bottom: 0.5rem;
	left: 0.25rem;
	color: var(--subtle);
}

div.control-group input,
div.control-group select
{
	padding: 0.5em;
	font: inherit;
	background: var(--input-bg);
	color: var(--input-text);
	border-width: 0.2rem;
	border-style: solid;
	border-color: var(--disabled);
	font-weight: 700;
	margin-bottom: 0;
}

div.submit-button,
div.buttonHolder
{
	text-align: right;
	margin-top: 3rem;
}

div.submit-button button,
div.buttonHolder button
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;

	text-decoration: none;
	display: inline-block;
	border-radius: 0.6rem;
	font-size: inherit;
	font-family: inherit;
	font-weight: 700;
	border: 0;
	color: var(--button-text);
	background-color: var(--button-bg);
	padding: 0.15em 1em 0.25em 1em;
	margin: 0 auto 0 auto;
}

button:disabled,
input:disabled
{
	cursor: inherit;
	pointer-events: none;
	opacity: 0.5;
	filter: saturate(0);
}

div.control-group
{
	margin: .5rem 0;
}

.helptext,
p.helptext,
.help-block
{
	color: var(--subtle);
	margin: 1rem auto;
	font-size: .65em;
	line-height: 1.2em;
	opacity: 1;
	text-align: right;
}

.helper-text
{
	color: var(--subtle);
	font-size: 0.75em;
	line-height: 1.2;
}

section.sign-in .helptext
{
	text-align: inherit;
}

input:focus + p.helptext
{
	opacity: 1;
}

form input,
div.control-group input,
div.control-group select
{
	border: 0.05em solid var(--subtle);
	margin-bottom: 1em;
	font-size: 1em;
	padding: 0.5em;
	font-family: inherit;
	color: var(--input-text);
	background: var(--input-bg);
	font-weight: 400;
	border-color: var(--subtle);
}

form button,
form input[type=submit],
menu.actions a.action
{
	/* -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; */
	cursor: pointer;
	display: inline-block;

	text-decoration: none;
	font-size: 1em;
	font-family: inherit;
	font-weight: 600;
	letter-spacing: -0.0075em;

	border: 0;
	border-radius: 0.6rem;
	padding: 0.5em 1em 0.5em 1em;
}

form button,
form input[type=submit]
{
	color: var(--button-text);
	background-color: var(--button-bg);
	margin: 0.5em 0;
}

form .errorlist
{
	color: var(--negative);
	list-style: none;
	padding-left: 0;
}

div.single-field-form
{
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	grid-gap: 0.5em;
	margin: 1em auto;
}

div.single-field-form .control-group
{
	display: contents;
}

div.single-field-form label
{
	grid-row: 1;
	grid-column: 1 / span 1;
	margin: 0;
	left: unset;
}

div.single-field-form input
{
	grid-row: 1;
	grid-column: 2 / span 1;
	margin: 0;
}

div.single-field-form .helptext
{
	grid-row: 2;
	grid-column: 2 / span 2;
	margin: 0;
}

div.single-field-form .submit-button
{
	grid-row: 1;
	grid-column: 3 / span 1;
	margin: 0;
}

a.toggle-renewal
{
	text-decoration: none;
	padding: 0.25em 0.5em;
	display: inline-block;
}

/* ------------------------- */
/*!---- Global Messages ---- */
/* ------------------------- */

#messages ul
{
	padding: 0;
}

#messages li
{
	list-style: none;
	background-color: var(--card-bg);
	color: var(--text);
	margin: 1em auto;
	padding: .75em;
	border-radius: 0.8rem;
	font-size: .8em;
	border: 0.3rem solid var(--bright);
	display: grid;
	place-content: center;
	align-items: center;
	grid-template-columns: 1.5em 1fr;
	grid-gap: 0.5em;
}

#messages li:before,
#messages li.success:before
{
	content: "";
	display: inline-grid;
	place-content: center;
	grid-column: 1;
	align-self: center;
	width: 1.5em;
	height: 1.5em;

	background-color: var(--bright);
	-webkit-mask-image: url("../images/message-confirm.svg");
	mask-image: url("../images/message-confirm.svg");
	-webkit-mask-size: 90% 90%;
	mask-size: 90% 90%;
	-webkit-mask-position: center center;
	mask-position: center center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

#messages li.error
{
	background-color: var(--card-bg);
	border: 0.3rem solid var(--negative);
	color: var(--text);
	font-weight: 600;
}

#messages li.error:before
{
	-webkit-mask-image: url("../images/message-error.svg");
	mask-image: : url("../images/message-error.svg");
	background-color: var(--negative);
}

#messages li.warning:before
{
	-webkit-mask-image: url("../images/message-warning.svg");
	mask-image: : url("../images/message-warning.svg");
	background-color: var(--bright);
}

#messages li.information:before,
#messages li.debug:before
{
	-webkit-mask-image: url("../images/message-info.svg");
	mask-image: : url("../images/message-info.svg");
	background-color: var(--bright);
}

.hidden, .asteriskField
{
	display: none;
}

form.change-email,
section.login form
{
	margin: 2em 0;
	max-width: 40ch;
}

section.account-email form.change-email,
section.account-email.expanded dd.change-email a.button
{
	display: none;
}

section.account-email.expanded form.change-email
{
	display: block;
}

section.creditcard form
{
	max-width: 40ch;
}

div#card-element
{
	border: 0.2rem solid transparent !important;
	outline: 0;
	padding: 0.5em 0.25em;
	border-radius: 0.6rem;
	background: var(--white);  // Always white because we can't flip the CC text color
	-webkit-appearance: none;
}

dl.account-info,
dl.ordered-item
{
	display: grid;
	margin: 1em 0;
}

dl.ordered-item
{
	background-color: var(--card-bg);
	border-radius: 0.5em;
	padding: 1em;
	border: 0.1rem solid var(--subtle);
	max-width: 40ch;
}

dl.account-info dt,
dl.ordered-item dt
{
	color: var(--subtle);
	margin-top: 0.35em;
	text-transform: uppercase;
	font-size: 0.85em;
}

dl.account-info dd,
dl.ordered-item dd
{
	margin: 0.25em 0;
	display: flex;
	align-items: center;
}

dd.item-name:before
{
	width: 1em;
	height: 1em;
	margin-right: 0.15em;
	content: "";
	display: inline-block;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	background-size: contain;
}

dl.nova dd.item-name:before
{ 
	background-image: url(../images/nova-icon.png);
}

dl.transmit5 dd.item-name.transmit5:before
{ 
	background-image: url(../images/transmit5-icon.png);
}

dt.item-name
{
	display: none;
}

dd.item-name
{
	font-size: 2em;
	font-weight: 600;
	display: flex;
}

dt.item-details-link
{
	display: none;
}

dd.item-details-link
{
	font-size: 1.2em;
}

dd.item-details-link a
{
	margin-left: 0;
}


ul.payment-history
{
	list-style: none;
	padding: 0;
}

li.payment-item
{
	border-bottom: 0.1rem solid var(--subtle);
	margin-bottom: 1em;
}

li.payment-item:last-child
{
	border-bottom: 0;
	margin-bottom: 0;
}

dl.payment-item
{
	display: block;
	margin: 1em 0;
}

dl.payment-item dt
{
	margin-top: 0.5em;
	font-size: 0.8em;
}

dl.payment-item dd
{
	margin-left: 0;
}

dl.payment-item .payment-receipt,
dl.payment-item .payment-invoice
{
	text-align: center;
}

@media (min-width:480px)
{
	dl.payment-item
	{
		display: grid;
		grid-template-columns: auto;
		justify-content: start;
		grid-gap: 0.25em 2em;
		margin: 0.25em 0;
	}
	
	dl.payment-item dt
	{
		position: absolute;
		visibility: hidden;
		left: -100vw;
		top: -100vh;
	}
	
	li.payment-item:first-child dl.payment-item dt
	{
		position: static;
		visibility: visible;
		left: unset;
		top: unset;
		grid-row: 1;
		text-transform: uppercase;
		color: var(--subtle);
	}
	
	li.payment-item
	{
		border-bottom: 0;
		margin-bottom: 0;
	}
}

nav.bottom
{
	margin-top: 5rem;
	margin-bottom: 5rem;
}
	
nav.bottom ul.footer
{
	list-style: none;
	display: flex;
	padding: 0;
	font-size: 1em;
}

ul.footer a
{
	color: inherit;
}

ul.footer li
{
	margin-right: 1em;
}

html
{
	font-size: 2.4px;
}

body
{
	font-size: 4.8rem;
}

@media (min-width: 240px)
{
	html
	{
		font-size: 1vw;
	}
}

@media (min-width: 480px)
{
	body
	{
		font-size: 3.6rem;
	}
}

@media (min-width: 640px)
{
	body
	{
		font-size: 2.4rem;
	}
}

@media (min-width: 1000px)
{
	html
	{
		font-size: 10px;
	}
}