/*
 * The account page's own styling.
 *
 * Sizes, spacing and colour come from the theme's own tokens, so the page
 * inherits the store's design rather than carrying a second opinion about it. The
 * fallbacks exist because a plugin cannot assume which theme is active, and an
 * unstyled form is better than an invisible one.
 *
 * The one exception is the status colours on the pills and the failed link
 * notice. The theme's palette is a brand palette and has no green or red in it,
 * so those two pairs are written out here.
 */

.ghizo-login,
.ghizo-licences {
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

/* ---------------------------------------------------------------- sign in */

.ghizo-login {
	display: grid;
	gap: 0.5rem;
	max-width: 26rem;
}

.ghizo-login__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.4;
	font-weight: 500;
	color: var(--wp--preset--color--ink, #0f172a);
}

.ghizo-login__input {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	/* font: inherit brings the theme's 1.65 prose leading with it, which leaves a
	 * control taller than its own padding describes. */
	line-height: 1.4;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	color: var(--wp--preset--color--ink, #0f172a);
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #dee4ed);
	border-radius: 0.4rem;
}

.ghizo-login__input:focus {
	outline: 2px solid var(--wp--preset--color--blue, #2563eb);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--blue, #2563eb);
}

.ghizo-login__button {
	justify-self: start;
	min-height: 44px;
	padding: 0.7rem 1.2rem;
	font: inherit;
	line-height: 1.2;
	font-weight: 600;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--blue, #2563eb);
	border: 0;
	border-radius: 0.4rem;
	cursor: pointer;
}

.ghizo-login__button:hover,
.ghizo-login__button:focus {
	background: var(--wp--preset--color--navy-deep, #1e3a8a);
}

.ghizo-login--sent,
.ghizo-login--in {
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--wash, #f3f6fa);
	border-left: 3px solid var(--wp--preset--color--blue, #2563eb);
	border-radius: 0.3rem;
}

.ghizo-login--sent p,
.ghizo-login--in p {
	margin: 0;
}

.ghizo-login--sent p + p,
.ghizo-login--in p + p {
	margin-top: 0.5rem;
}

.ghizo-login__hint {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

/* A link that did not work. Stated rather than dramatised: there is nothing to
 * fix except asking for another one, which the form underneath already offers. */
.ghizo-login__failed {
	padding: 0.85rem 1rem;
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	color: #7f1d1d;
	background: #fee2e2;
	border-radius: 0.3rem;
}

/* --------------------------------------------------------------- licences */

.ghizo-licences__empty,
.ghizo-licences__notice {
	padding: 1rem 1.15rem;
	background: var(--wp--preset--color--wash, #f3f6fa);
	border-radius: 0.3rem;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

.ghizo-licence {
	padding: 1.25rem 1.4rem;
	margin-block-end: 1rem;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #dee4ed);
	border-radius: 0.5rem;
}

.ghizo-licence__product {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	line-height: 1.25;
}

.ghizo-licence__meta {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

/* The key is the thing people came for, so it is the most prominent element
 * in the card and selectable in one gesture. */
.ghizo-licence__key {
	margin: 0 0 0.75rem;
}

.ghizo-licence__key code {
	display: block;
	padding: 0.65rem 0.8rem;
	/* The theme has a monospace stack, and this is the one string on the page
	 * that has to be read a character at a time. Left to the browser's default a
	 * key lands in Courier on one machine and something else on the next. */
	font-family: var(--wp--preset--font-family--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.45;
	letter-spacing: 0.04em;
	overflow-wrap: anywhere;
	background: var(--wp--preset--color--wash, #f3f6fa);
	border: 1px solid var(--wp--preset--color--line, #dee4ed);
	border-radius: 0.35rem;
	user-select: all;
}

.ghizo-licence__expires,
.ghizo-licence__sites {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.5;
	/* Every digit the same width, so a count going from 1 to 2 does not shift the
	 * words after it. */
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

.ghizo-licence__activations {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--line, #dee4ed);
}

.ghizo-licence__activation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #dee4ed);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.45;
}

.ghizo-licence__activation:last-child {
	border-bottom: 0;
}

.ghizo-licence__site {
	/* Breaks where a long host needs it rather than mid word on every line. */
	overflow-wrap: anywhere;
}

.ghizo-licence__release {
	margin: 0;
}

/* Quiet by default. Releasing a site is occasionally necessary and never the
 * thing we want a customer to click by accident, so it does not compete with
 * the key above it. */
.ghizo-licence__release-button {
	/* Quiet, but still a real target. 44px is the smallest a finger reliably
	 * finds, and this is the one control on the page that costs somebody a
	 * site slot if they miss it and hit the wrong row. */
	min-height: 44px;
	padding: 0.5rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.3;
	color: var(--wp--preset--color--ink-muted, #4b5768);
	background: transparent;
	border: 1px solid var(--wp--preset--color--line, #dee4ed);
	border-radius: 0.3rem;
	cursor: pointer;
}

.ghizo-licence__release-button:hover,
.ghizo-licence__release-button:focus {
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--ink-muted, #4b5768);
	border-color: var(--wp--preset--color--ink-muted, #4b5768);
}

/* ------------------------------------------------------------------ pills */

.ghizo-pill {
	display: inline-block;
	padding: 0.2rem 0.5rem;
	font-size: var(--wp--preset--font-size--micro, 0.75rem);
	/* Its own leading. A 1.55 line inside a chip this small leaves the label
	 * sitting off centre. */
	line-height: 1.35;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 0.25rem;
}

.ghizo-pill--active {
	color: #14532d;
	background: #dcfce7;
}

.ghizo-pill--expired,
.ghizo-pill--revoked {
	color: #7f1d1d;
	background: #fee2e2;
}

.ghizo-pill--neutral {
	color: var(--wp--preset--color--ink-muted, #4b5768);
	background: var(--wp--preset--color--wash, #f3f6fa);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* ============================================================== the panel
 *
 * A sidebar beside the content above 56rem, stacked below it. The breakpoint is
 * where two columns stop being comfortable rather than a device width, because
 * this sits inside a theme whose own container may be narrower than the window.
 *
 * No horizontal padding of its own. The theme supplies the gutter, at every
 * width, and adding a second one insets the panel 20px further than the header
 * above it and the footer below it, so the site's own edges and the panel's stop
 * agreeing. That does mean the panel expects to sit inside a theme that has a
 * gutter, which this one does.
 *
 * 56rem rather than 60rem because a 937px viewport, which is an ordinary laptop
 * window once the browser chrome is taken off, fell a few pixels short and got
 * the stacked layout on a screen with obvious room for two columns. At 56rem
 * there is still 16rem of sidebar and about 40rem of content, which is wider
 * than the theme's own prose measure.
 */

/* The panel reads at interface sizes, not at the store's prose sizes.
 *
 * The theme sets body copy at 1.125rem on a 1.65 line, which is right for a page
 * somebody reads and wrong for a page somebody uses: at that size a sidebar of
 * links, a column of cards and a table all come out looking like paragraphs. One
 * declaration moves everything inside the panel down a step and tightens the
 * leading, and every size below is measured against it:
 *
 *   x-large   the heading
 *   large     a card's product name
 *   medium    body copy, inputs, and a licence key
 *   small     metadata, table cells, quiet actions
 *   micro     pills and uppercase labels
 */
.ghizo-panel {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.55;
	display: grid;
	gap: 2rem;
	max-width: 76rem;
	margin-inline: auto;
	/* Padding rather than margin, and this is not a stylistic preference.
	 * WordPress zeroes the top margin of whatever comes first inside the post
	 * content, on the assumption that the template put the space there, and it
	 * does so through a selector a plain class cannot outrank. The wide template
	 * deliberately leaves that space out, because the pages it was built for
	 * open with a full bleed hero that belongs against the header. This one does
	 * not, so it takes the space back as padding, which nothing is competing
	 * for. Same spacing|50 the other templates start their headings at.
	 *
	 * The bottom is left alone: the theme pads main below any page that does not
	 * end in a full bleed band. */
	padding-block-start: var(--wp--preset--spacing--50, 4rem);
}

@media (min-width: 56rem) {
	.ghizo-panel {
		grid-template-columns: 16rem 1fr;
		gap: 3rem;
	}
}

/* Signed out there is one thing to do, so it is centred and narrow rather than
 * floating in a wide empty grid.
 *
 * The single-column override is not optional: --out is still a .ghizo-panel, so
 * without it the sole child lands in the 16rem sidebar track and the form comes
 * out about the width of a button. */
.ghizo-panel--out {
	max-width: 30rem;
	grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
	.ghizo-panel--out {
		grid-template-columns: 1fr;
	}
}

/* Signed in, the heading names the view, so it belongs to the view. Signed out
 * there is no view yet and this is the only heading on the page. */
.ghizo-panel__heading {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.15;
}

.ghizo-panel__gate {
	padding: 1.75rem;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #dee4ed);
	border-radius: 0.6rem;
}

/* ------------------------------------------------------------- the sidebar */

.ghizo-panel__nav {
	align-self: start;
}

@media (min-width: 56rem) {
	.ghizo-panel__nav {
		position: sticky;
		top: 2rem;
	}
}

.ghizo-panel__who {
	display: grid;
	gap: 0.15rem;
	padding: 0 0 1rem;
	margin-block-end: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line, #dee4ed);
}

/* Small uppercase labels take the tracking the theme already uses for them, in
 * the footer and above its headings: 0.12em, not a third value invented here. */
.ghizo-panel__who-label {
	font-size: var(--wp--preset--font-size--micro, 0.75rem);
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

.ghizo-panel__who-email {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.45;
	font-weight: 600;
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--ink, #0f172a);
}

.ghizo-panel__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ghizo-panel__link {
	display: flex;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	gap: 0.65rem;
	align-items: center;
	/* 44px minimum touch target, met by padding rather than a fixed height so
	 * a wrapped label still grows the row instead of overflowing it. */
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	margin-block-end: 0.2rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--ink-muted, #4b5768);
	text-decoration: none;
	border-radius: 0.4rem;
	transition: background-color 180ms ease-out, color 180ms ease-out;
}

.ghizo-panel__link:hover {
	color: var(--wp--preset--color--ink, #0f172a);
	background: var(--wp--preset--color--wash, #f3f6fa);
}

.ghizo-panel__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #2563eb);
	outline-offset: 2px;
}

/* Current page: weight and a filled ground, not colour alone, so it reads
 * without relying on hue perception. */
.ghizo-panel__link.is-current {
	font-weight: 600;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--navy, #0f172a);
}

.ghizo-panel__link.is-current:hover {
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--navy, #0f172a);
}

.ghizo-panel__icon {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
}

.ghizo-panel__signout {
	display: inline-block;
	min-height: 44px;
	padding: 0.7rem 0.75rem;
	margin-block-start: 1rem;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	color: var(--wp--preset--color--ink-muted, #4b5768);
	text-decoration: underline;
	border-top: 1px solid var(--wp--preset--color--line, #dee4ed);
}

.ghizo-panel__signout:hover {
	color: var(--wp--preset--color--ink, #0f172a);
}

.ghizo-panel__signout:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #2563eb);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- the body */

.ghizo-panel__main {
	min-width: 0;
}

.ghizo-panel__title {
	margin: 0 0 0.35rem;
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
	line-height: 1.15;
}

.ghizo-panel__lede {
	margin: 0 0 1.5rem;
	line-height: 1.55;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

/* Inside the panel the cards are already on a page, so they do not need the
 * outer margin the standalone shortcode carries. */
.ghizo-panel__main .ghizo-licences {
	margin-block: 0;
}

/* EDD's history table, brought into line with the cards beside it. */
.ghizo-panel__main table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.45;
	/* Dates and amounts sit in columns, and columns only line up when every digit
	 * takes the same width. */
	font-variant-numeric: tabular-nums;
}

.ghizo-panel__main table th,
.ghizo-panel__main table td {
	padding: 0.7rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--line, #dee4ed);
}

.ghizo-panel__main table th {
	font-size: var(--wp--preset--font-size--micro, 0.75rem);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ink-muted, #4b5768);
}

/* A table is the one thing here that can genuinely overflow, so it scrolls
 * inside its own box rather than pushing the page sideways. */
.ghizo-panel__main .edd-table-wrapper,
.ghizo-panel__main .edd_purchase_history {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	.ghizo-panel__link {
		transition: none;
	}
}