/**
 * Invitely host dashboard.
 *
 * Inherits the tokens defined on .invitely so the dashboard and the public
 * invitation stay visually related without a second palette.
 */

.invitely-dash,
.invitely-auth {
	max-width: 60rem;
	margin: 2rem auto;
}

.invitely-auth {
	max-width: 34rem;
}

.invitely-dash__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

.invitely-dash__head h2 {
	margin: 0;
	font-size: 1.4rem;
}

.invitely-dash__actions {
	display: flex;
	gap: 0.5rem;
}

.invitely-dash__subhead {
	margin: 2.25rem 0 0.75rem;
	color: var(--invitely-muted);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.invitely-dash__back {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}

.invitely-dash__lede {
	margin: -0.5rem 0 1.5rem;
	color: var(--invitely-muted);
}

.invitely-btn--ghost {
	background: transparent;
	border: 1px solid var(--invitely-line);
	color: var(--invitely-ink);
}

.invitely-btn--ghost:hover,
.invitely-btn--ghost:focus {
	border-color: var(--invitely-accent);
	color: var(--invitely-accent);
	filter: none;
}

/* ------------------------------------------------------------ Event list */

.invitely-eventlist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.invitely-eventrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--invitely-line);
}

.invitely-eventrow__main {
	flex: 1 1 16rem;
	min-width: 0;
}

.invitely .invitely-eventrow__title {
	display: block;
	color: var(--invitely-ink);
	font-size: 1.08rem;
	font-weight: 600;
	text-decoration: none;
}

.invitely .invitely-eventrow__title:hover,
.invitely .invitely-eventrow__title:focus {
	color: var(--invitely-accent);
	text-decoration: underline;
}

.invitely .invitely-eventrow__links a {
	color: var(--invitely-accent);
	text-decoration: none;
	white-space: nowrap;
}

.invitely .invitely-eventrow__links a:hover,
.invitely .invitely-eventrow__links a:focus {
	text-decoration: underline;
}

.invitely-eventrow__when {
	display: block;
	margin-top: 0.15rem;
	color: var(--invitely-muted);
	font-size: 0.88rem;
}

.invitely-eventrow__when em {
	margin-left: 0.4rem;
	padding: 0.05rem 0.4rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: 20px;
	font-size: 0.75rem;
	font-style: normal;
}

.invitely-eventrow__count {
	text-align: center;
	min-width: 4.5rem;
}

.invitely-eventrow__count strong {
	display: block;
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.invitely-eventrow__count span {
	color: var(--invitely-muted);
	font-size: 0.76rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.invitely-eventrow__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------- Stat grid */

.invitely-statgrid {
	display: grid;
	gap: 0.6rem;
	grid-template-columns: repeat( auto-fit, minmax( 7rem, 1fr ) );
	margin: 0 0 1.75rem;
}

.invitely-statgrid__item {
	padding: 0.9rem 1rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: 8px;
}

.invitely-statgrid__item.is-lead {
	background: var(--invitely-accent);
	border-color: var(--invitely-accent);
	color: #fff;
}

.invitely-statgrid__item strong {
	display: block;
	font-size: 1.55rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
}

.invitely-statgrid__item span {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	opacity: 0.78;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------- Panels */

.invitely-panelgrid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
	margin: 0 0 2rem;
	align-items: start;
}

.invitely-panel {
	padding: 1.25rem 1.35rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: var(--invitely-radius);
}

.invitely-panel h3 {
	margin: 0 0 1rem;
	font-size: 1.02rem;
}

.invitely-panel .invitely-form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

/* --------------------------------------------------------------- Toggles */

/*
 * Laid out as a block, not a flex container. A <fieldset> with display:flex
 * drags its <legend> in as a flex item, which parks the legend text on top
 * of the box border instead of notching into it.
 */
.invitely-toggles {
	display: block;
	margin: 0 0 1.25rem;
	padding: 0.4rem 1rem 0.85rem;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 8px;
}

/*
 * Section titles in the builder.
 *
 * They were set like the field captions inside them — small, muted, uppercase —
 * so a section title and the labels it contained read as the same rank, and the
 * form was one long wall of similar text. They are titles, so they are set as
 * titles.
 */
.invitely-toggles legend {
	padding: 0 0.45rem;
	color: var(--invitely-ink);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.invitely-toggles label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0.4rem 1.1rem 0 0;
	color: var(--invitely-ink);
	font-size: 0.94rem;
	vertical-align: middle;
}

.invitely-toggles input[type="checkbox"],
.invitely-toggles input[type="radio"] {
	width: auto;
	margin: 0;
	flex: 0 0 auto;
}

.invitely-toggles__split {
	display: inline-block;
	margin: 0.4rem 0.75rem 0 0;
	color: var(--invitely-muted);
	font-size: 0.85rem;
	vertical-align: middle;
}

/*
 * A toggle that qualifies the ones before it rather than sitting beside them as
 * another equal choice. On its own line with a rule above, so "not paid yet"
 * cannot be misread as a fifth reply status.
 */
.invitely-toggles label.invitely-toggles__break {
	display: flex;
	margin: 0.85rem 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var(--invitely-line);
}

.invitely-toggles .invitely-toggles__note {
	display: block;
	margin: 0.3rem 0 0 1.55rem;
	line-height: 1.45;
}

.invitely-consent {
	margin: 0 0 1.25rem;
	color: var(--invitely-ink);
	padding: 0.9rem 1rem;
	background: var(--invitely-accent-soft);
	border-radius: 8px;
	font-size: 0.92rem;
}

.invitely-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.invitely-consent .invitely-hint {
	display: block;
	margin: 0.4rem 0 0 1.55rem;
}

.invitely-optional {
	margin-left: 0.35rem;
	font-weight: 400;
	letter-spacing: 0;
	opacity: 0.65;
	text-transform: none;
}

/* ---------------------------------------------------------------- Tables */

.invitely-table-wrap {
	overflow-x: auto;
	margin: 0 0 2rem;
}

.invitely-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.93rem;
}

.invitely-table th {
	padding: 0.5rem 0.65rem;
	border-bottom: 1px solid var(--invitely-line);
	color: var(--invitely-muted);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.invitely-table td {
	padding: 0.65rem;
	border-bottom: 1px solid var(--invitely-line);
	vertical-align: top;
}

.invitely-table tr.is-yes td:first-child {
	box-shadow: inset 3px 0 0 var(--invitely-accent);
}

.invitely-table tr.is-maybe td:first-child {
	box-shadow: inset 3px 0 0 #c99a2e;
}

.invitely-table tr.is-no td:first-child {
	box-shadow: inset 3px 0 0 var(--invitely-line);
}

.invitely-contact span {
	display: block;
	line-height: 1.4;
}

.invitely-notecell {
	max-width: 18rem;
	color: var(--invitely-muted);
}

.invitely-ref {
	display: block;
	margin-top: 0.15rem;
	color: var(--invitely-muted);
	font-family: Menlo, Consolas, monospace;
	font-size: 0.72rem;
}

.invitely-flag {
	display: inline-block;
	margin-left: 0.3rem;
	padding: 0.02rem 0.35rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: 20px;
	font-size: 0.7rem;
	font-style: normal;
}

.invitely-flag--bad {
	border-color: #a3352a;
	color: #a3352a;
}

.invitely-inline {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.invitely-inline select,
.invitely-inline input[type="number"] {
	width: auto;
	padding: 0.3rem 0.4rem;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 5px;
	color: var(--invitely-field-ink);
	font: inherit;
	font-size: 0.86rem;
}

.invitely-inline input[type="number"] {
	width: 3.6rem;
}

.invitely-inline button {
	padding: 0.32rem 0.6rem;
	background: transparent;
	border: 1px solid var(--invitely-line);
	border-radius: 5px;
	color: var(--invitely-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.84rem;
}

.invitely-inline button:hover {
	border-color: var(--invitely-accent);
	color: var(--invitely-accent);
}

.invitely-link-danger {
	border-color: transparent !important;
	color: #a3352a !important;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ Auth */

/*
 * The submit button is centred on the sign in and sign up forms, matching the
 * links beneath it. On a narrow single-column card a left-aligned button reads
 * as unfinished, and there is nothing to its right to align with.
 */
.invitely-auth .invitely-submit {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.invitely-auth .invitely-submit .invitely-btn {
	min-width: 12rem;
	text-align: center;
}

.invitely-auth__alt {
	margin: 1.25rem 0 0;
	color: var(--invitely-muted);
	font-size: 0.9rem;
	text-align: center;
}

.invitely-field--inline label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.94rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.invitely-builder .invitely-toggles {
	background: #fff;
}

@media ( max-width: 640px ) {
	.invitely-eventrow__count {
		text-align: left;
	}

	.invitely-toggles {
		gap: 0.5rem;
	}

	.invitely-toggles label {
		flex: 1 1 100%;
	}
}



/* ------------------------------------------------- Builder + live preview */

.invitely-builder-layout {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax( 0, 1fr );
	align-items: start;
}

@media ( min-width: 62rem ) {
	.invitely-builder-layout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 26rem, 1.15fr );
	}

	.invitely-builder-layout__preview {
		position: sticky;
		top: 1.5rem;
	}
}

/*
 * The builder is wider than the rest of the dashboard. Its right-hand pane is
 * a whole web page scaled down, and squeezing that into the column width the
 * list screens use made the preview unreadable.
 */
.invitely-dash.is-builder {
	max-width: 84rem;
}

@media ( min-width: 100rem ) {
	.invitely-dash.is-builder {
		max-width: 96rem;
	}

	.invitely-builder-layout {
		grid-template-columns: minmax( 0, 1fr ) minmax( 34rem, 1.3fr );
	}
}

.invitely-preview__label {
	margin: 0 0 0.6rem;
	color: var(--invitely-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.invitely-preview__links {
	margin: 0.75rem 0 0;
	font-size: 0.88rem;
}

/* The invitation card, shared by the preview and [invitely_preview] */

.invitely-card {
	padding: 1.6rem 1.5rem;
	background: var(--invitely-field-bg);
	color: var(--invitely-field-ink);
	border: 1px solid var(--invitely-line);
	border-radius: var(--invitely-radius);
	overflow: hidden;
}

.invitely-card__inner {
	position: relative;
	z-index: 1;
}

/* Banner: the photo sits above the text, bleeding to the card edges. */
.invitely-card__media {
	margin: -1.6rem -1.5rem 1.3rem;
}

.invitely-card__image,
.invitely-card__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: cover;
}

/*
 * Background: the same photo behind the text. Drawn as a pseudo-element with
 * a gradient scrim rather than a plain background image, because a photo of
 * unknown brightness behind unknown text is a contrast accident waiting to
 * happen.
 */
.invitely-card.is-background {
	position: relative;
	min-height: 18rem;
	display: flex;
	align-items: flex-end;
	background-color: #1a1a17;
	color: #fff;
}

.invitely-card.is-background::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--invitely-card-bg);
	background-size: cover;
	background-position: center;
}

.invitely-card.is-background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.82 ) 0%, rgba( 0, 0, 0, 0.55 ) 45%, rgba( 0, 0, 0, 0.15 ) 100% );
}

.invitely-card.is-background .invitely-card__media {
	display: none;
}

.invitely-card.is-background .invitely-card__inner {
	z-index: 2;
	width: 100%;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.45 );
}

.invitely-card.is-background .invitely-card__title,
.invitely-card.is-background .invitely-card__when,
.invitely-card.is-background .invitely-card__where,
.invitely-card.is-background .invitely-card__body {
	color: #fff;
}

.invitely-card.is-background .invitely-card__eyebrow {
	color: #9fdccd;
}

/* No photo yet: keep the banner slot out of the flow entirely. */
.invitely-card__media[hidden] {
	display: none;
}

/* ------------------------------------------------------------ Photo field */

.invitely-imagefield {
	margin: 0 0 1.25rem;
}

.invitely-imagefield__row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-start;
}

.invitely-imagefield__thumb {
	flex: 0 0 auto;
	width: 8.5rem;
	border: 1px solid var(--invitely-line);
	border-radius: 8px;
	overflow: hidden;
	line-height: 0;
	background: var(--invitely-paper);
}

.invitely-imagefield__thumb img {
	display: block;
	width: 100%;
	height: 6rem;
	object-fit: cover;
}

.invitely-imagefield__controls {
	flex: 1 1 14rem;
	min-width: 0;
}

/* The file control is the one input that should not be full-bleed styled. */
.invitely-imagefield input[type="file"] {
	width: 100%;
	padding: 0.5rem;
	background: var(--invitely-field-bg);
	border: 1px dashed var(--invitely-line);
	border-radius: 7px;
	color: var(--invitely-field-ink);
	font: inherit;
	font-size: 0.9rem;
}

.invitely-imagefield__remove {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0 0;
	color: var(--invitely-ink);
	font-size: 0.9rem;
}

.invitely-imagefield__remove input {
	width: auto;
}

.invitely-imagefield__style {
	margin-top: 0.85rem;
	margin-bottom: 0;
}

.invitely-card__eyebrow {
	margin: 0 0 0.35rem;
	color: var(--invitely-accent);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.invitely-card__title {
	margin: 0 0 0.7rem;
	font-size: 1.6rem;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.invitely-card__when {
	margin: 0 0 0.2rem;
	font-size: 1rem;
	font-weight: 600;
}

.invitely-card__where {
	margin: 0 0 1rem;
	color: var(--invitely-muted);
	font-size: 0.94rem;
}

.invitely-card__body {
	font-size: 0.96rem;
}

.invitely-card__body p {
	margin: 0 0 0.7rem;
}

.invitely-card__body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------- Share panel */

.invitely-share__grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax( 0, 1fr );
	align-items: start;
}

@media ( min-width: 48rem ) {
	.invitely-share__grid {
		grid-template-columns: minmax( 0, 1fr ) auto;
	}
}

.invitely-share__link label {
	display: block;
	margin: 0 0 0.35rem;
	color: var(--invitely-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.invitely-copyrow {
	display: flex;
	gap: 0.4rem;
}

.invitely-copyrow input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	padding: 0.65rem 0.7rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: 7px;
	color: var(--invitely-ink);
	font: inherit;
	font-size: 0.92rem;
}

.invitely-copyrow .invitely-btn {
	flex: 0 0 auto;
}

.invitely-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 1.1rem 0 0;
}

.invitely-share__qr {
	text-align: center;
}

.invitely-qr {
	display: inline-block;
	padding: 0.6rem;
	background: #fff;
	border: 1px solid var(--invitely-line);
	border-radius: var(--invitely-radius);
	line-height: 0;
}

.invitely-qr svg {
	display: block;
	height: auto;
	max-width: 100%;
}

.invitely-share__qrlinks {
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
}

.invitely-share__qr .invitely-hint {
	display: block;
	max-width: 15rem;
	margin: 0.5rem auto 0;
}

@media print {
	.invitely-share__buttons,
	.invitely-share__qrlinks,
	.invitely-copyrow .invitely-btn,
	.invitely-dash__back {
		display: none !important;
	}

	.invitely-qr {
		border: 0;
	}
}



/* Opt-in dark surfaces for the dashboard, matching the base stylesheet. */
[data-invitely-theme="dark"] .invitely-panel,
[data-invitely-theme="dark"] .invitely-builder .invitely-toggles {
	background: #191714;
}

[data-invitely-theme="dark"] .invitely-statgrid__item.is-lead {
	color: #10201d;
}

/* The QR always stays dark-on-light. Scanners need that contrast. */
.invitely-qr {
	background: #fff;
}

.invitely-dash__who {
	margin: -0.75rem 0 1.5rem;
	color: var(--invitely-muted);
	font-size: 0.88rem;
}

/* ------------------------------------------------------- Colours and type */

.invitely-look__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem 1.25rem;
	margin: 0.5rem 0 0;
}

.invitely-look__swatch,
.invitely-look__select {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.invitely-look__swatch span,
.invitely-look__select span {
	color: var(--invitely-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.invitely-look input[type="color"] {
	width: 3.4rem;
	height: 2.2rem;
	padding: 2px;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 6px;
	cursor: pointer;
}

.invitely-look select {
	width: auto;
	min-width: 9rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.9rem;
}

.invitely-look__warning {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.8rem;
	background: #fbeeec;
	border-left: 3px solid #a3352a;
	border-radius: 6px;
	color: #7a2620;
	font-size: 0.88rem;
}

.invitely-look__warning[hidden] {
	display: none;
}

.invitely-publish-now {
	margin: 0.75rem 0 0;
}

/* ------------------------------------------------------- Framing controls */

.invitely-frame__grid {
	display: grid;
	gap: 0.75rem 1.25rem;
	grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) );
	margin: 0.5rem 0 0;
}

.invitely-frame__control {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
}

.invitely-frame__control span {
	color: var(--invitely-muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.invitely-frame__control input[type="range"] {
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	accent-color: var(--invitely-accent);
}

.invitely-frame__rotate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 1rem;
	margin: 0.9rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--invitely-line);
}

.invitely-frame__rotate .invitely-hint {
	flex: 1 1 100%;
	margin: 0 0 0.15rem;
}

/* -------------------------------------------------------- Overlay editor */

.invitely-overlayrow {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.6rem;
	padding: 0.7rem 0.8rem;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 8px;
}

.invitely-overlayrow__text {
	flex: 1 1 12rem;
	min-width: 0;
}

.invitely-overlayrow__bit {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin: 0;
}

.invitely-overlayrow__bit span {
	color: var(--invitely-muted);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.invitely-overlayrow__bit input[type="number"] {
	width: 4.5rem;
}

.invitely-overlayrow__bit input[type="color"] {
	width: 3rem;
	height: 2.1rem;
	padding: 2px;
}

.invitely-overlayrow__bit select {
	width: auto;
	min-width: 6.5rem;
	padding: 0.35rem 0.4rem;
	font-size: 0.86rem;
}

.invitely-overlayrow__bit--check {
	flex-direction: row;
	align-items: center;
	gap: 0.35rem;
	padding-bottom: 0.4rem;
}

.invitely-overlayrow__bit--check input {
	width: auto;
}

.invitely-overlayrow__remove {
	padding: 0.3rem 0.6rem;
	background: transparent;
	border: 1px solid var(--invitely-line);
	border-radius: 5px;
	color: #a3352a;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
}

.invitely-overlayrow__remove:hover {
	border-color: #a3352a;
}

/* ------------------------------------------------------------ Hex + layout */

.invitely-look__pair {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.invitely-look__hex {
	width: 6.2rem;
	padding: 0.4rem 0.45rem;
	font-family: Menlo, Consolas, monospace;
	font-size: 0.84rem;
	text-transform: lowercase;
}

.invitely-look__hex.is-invalid {
	border-color: #a3352a;
}

.invitely-layoutpick {
	display: block;
}

.invitely-layoutpick__option {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0.45rem 0 0;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--invitely-line);
	border-radius: 7px;
	cursor: pointer;
}

.invitely-layoutpick__option input {
	width: auto;
	margin-top: 0.25rem;
	flex: 0 0 auto;
}

.invitely-layoutpick__option strong {
	display: block;
	font-size: 0.95rem;
}

.invitely-layoutpick__option em {
	display: block;
	color: var(--invitely-muted);
	font-size: 0.84rem;
	font-style: normal;
}

.invitely-layoutpick__option:has( input:checked ) {
	border-color: var(--invitely-accent);
	background: var(--invitely-accent-soft);
}

@media ( max-width: 640px ) {
	.invitely-overlayrow {
		gap: 0.5rem;
	}

	.invitely-overlayrow__text {
		flex-basis: 100%;
	}

	.invitely-look__row {
		gap: 0.75rem;
	}

	.invitely-dash__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.invitely-table {
		font-size: 0.86rem;
	}
}

.invitely-panelcard {
	display: block;
}

.invitely-panelcard__toggle {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.35rem 0 0;
	color: var(--invitely-ink);
	font-size: 0.94rem;
}

.invitely-panelcard__toggle input {
	width: auto;
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

.invitely-panelcard .invitely-hint {
	margin: 0.3rem 0 0.7rem;
}

.invitely-panelcard input[type="range"] {
	width: 9rem;
	padding: 0;
	background: transparent;
	border: 0;
	accent-color: var(--invitely-accent);
}

/* --------------------------------------------------------------- Screen nav */

.invitely-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--invitely-line);
	font-size: 0.92rem;
}

.invitely-nav__home {
	font-weight: 600;
}

.invitely-nav__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.9rem;
	margin-left: auto;
}

.invitely .invitely-nav__link {
	padding: 0.15rem 0;
	color: var(--invitely-accent);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.invitely .invitely-nav__link:hover,
.invitely .invitely-nav__link:focus {
	border-bottom-color: var(--invitely-accent);
}

.invitely .invitely-nav__link.is-current {
	color: var(--invitely-ink);
	border-bottom-color: var(--invitely-ink);
	font-weight: 600;
}

.invitely-layoutpick__corners {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.8rem 0 0;
	color: var(--invitely-ink);
	font-size: 0.92rem;
}

.invitely-layoutpick__corners input {
	width: auto;
}

@media ( max-width: 600px ) {
	.invitely-nav__links {
		margin-left: 0;
		width: 100%;
	}
}

/*
 * The panel colour pickers sit outside .invitely-look, so the generic control
 * rule stretched them into full-width bars. Swatches need to look like
 * swatches wherever they appear.
 */
.invitely-panelcard input[type="color"],
.invitely-look input[type="color"] {
	width: 3.4rem;
	min-width: 3.4rem;
	height: 2.2rem;
	padding: 2px;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 6px;
	cursor: pointer;
}

.invitely-panelcard select,
.invitely-look select {
	width: auto;
	min-width: 9rem;
}

.invitely-parts {
	display: block;
}

.invitely-parts .invitely-hint {
	margin: 0.3rem 0 0.7rem;
}

.invitely-parts input[type="range"] {
	width: 9rem;
	padding: 0;
	background: transparent;
	border: 0;
	accent-color: var(--invitely-accent);
}

.invitely-parts .invitely-imagefield__row {
	margin-top: 0.9rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--invitely-line);
}

.invitely-parts input[type="color"] {
	width: 3.4rem;
	min-width: 3.4rem;
	height: 2.2rem;
	padding: 2px;
	background: var(--invitely-field-bg);
	border: 1px solid var(--invitely-line);
	border-radius: 6px;
	cursor: pointer;
}

.invitely-parts select {
	width: auto;
	min-width: 9rem;
}

/* -------------------------------------------------------------- Preview tabs */

.invitely-previewtabs {
	display: flex;
	gap: 0.25rem;
	margin: 0 0 0.85rem;
}

.invitely-previewtabs__tab {
	padding: 0.4rem 0.85rem;
	background: transparent;
	border: 1px solid var(--invitely-line);
	border-radius: 999px;
	color: var(--invitely-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.85rem;
}

.invitely-previewtabs__tab:hover:not( [disabled] ) {
	color: var(--invitely-accent);
	border-color: var(--invitely-accent);
}

.invitely-previewtabs__tab.is-current {
	background: var(--invitely-accent);
	border-color: var(--invitely-accent);
	color: #fff;
}

.invitely-previewtabs__tab[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.invitely-previewtabs__refresh {
	margin-left: 0.4rem;
	padding: 0.1rem 0.5rem;
	background: transparent;
	border: 1px solid var(--invitely-line);
	border-radius: 5px;
	color: var(--invitely-accent);
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
}

/*
 * The iframe renders at desktop width and is scaled down. A transformed element
 * keeps its original box in the layout, so the holder reserves the scaled
 * height in JavaScript.
 */
.invitely-pageframe {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--invitely-line);
	border-radius: var(--invitely-radius);
	background: #fff;
}

.invitely-pageframe iframe {
	display: block;
	border: 0;
	overflow: hidden;
	transform-origin: top left;
	/*
	 * Themes and WordPress itself ship `iframe { max-width: 100% }` for
	 * responsive embeds. That capped this iframe to the holder's width, so the
	 * inline 1280px never took effect: the page inside rendered at tablet
	 * width and the transform then shrank it again, leaving the right half of
	 * the pane empty. This is a deliberate exception to that rule, since the
	 * whole point here is to render wide and scale down.
	 */
	max-width: none !important;
	min-width: 0;
}

.invitely-payment {
	display: block;
}

.invitely-payment .invitely-hint {
	margin: 0.3rem 0 0.9rem;
}

.invitely-payment__fields[hidden] {
	display: none;
}

.invitely-builder-layout__preview {
	min-width: 0;
}

/*
 * The sticky preview is capped to the viewport and scrolls internally when the
 * invitation is longer than the screen, so a long page does not push the whole
 * editor down.
 */
@media ( min-width: 62rem ) {
	.invitely-builder-layout__preview {
		max-height: calc( 100vh - 3rem );
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* ------------------------------------------------------------ Gift editor */

.invitely-gifts-edit {
	display: block;
}

.invitely-gifts-edit__fields[hidden] {
	display: none;
}

.invitely-giftrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.invitely-giftrow input[type="text"] {
	flex: 0 1 12rem;
}

.invitely-giftrow input[type="url"] {
	flex: 1 1 16rem;
	min-width: 0;
}

@media ( max-width: 640px ) {
	.invitely-giftrow input[type="text"],
	.invitely-giftrow input[type="url"] {
		flex-basis: 100%;
	}
}

.invitely-preview__status {
	margin: 0.5rem 0 0;
	padding: 0.4rem 0.7rem;
	background: var(--invitely-accent-soft);
	border-radius: 6px;
	color: var(--invitely-ink);
	font-size: 0.85rem;
}

.invitely-preview__status[hidden] {
	display: none;
}

/* The Details section: a textarea and its typography in one place. */
.invitely-details {
	display: block;
}

.invitely-details .invitely-field {
	margin-bottom: 0.9rem;
}

.invitely-details .invitely-look__row {
	padding-top: 0.85rem;
	border-top: 1px solid var(--invitely-line);
}

/* More air between sections, now that their titles carry weight. */
.invitely-builder .invitely-toggles {
	margin-top: 1.75rem;
	padding-top: 0.75rem;
}

.invitely-builder .invitely-toggles:first-of-type {
	margin-top: 0;
}

/* Sub-labels stay quiet so the titles above them stay the loudest thing. */
.invitely-builder .invitely-look__swatch span,
.invitely-builder .invitely-look__select span,
.invitely-builder .invitely-frame__control span,
.invitely-builder .invitely-overlayrow__bit span {
	font-size: 0.7rem;
	letter-spacing: 0.07em;
}

/* The two standalone fields above the sections read as headings too. */
.invitely-builder > .invitely-field > label,
.invitely-details > .invitely-field > label {
	font-size: 0.78rem;
}

/* ------------------------------------------------------------ Builder tabs */

.invitely-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0 0 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--invitely-line);
}

.invitely-tabs__tab {
	padding: 0.45rem 0.85rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
	color: var(--invitely-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	white-space: nowrap;
}

.invitely-tabs__tab:hover {
	color: var(--invitely-accent);
}

.invitely-tabs__tab.is-current {
	background: var(--invitely-accent-soft);
	border-color: var(--invitely-accent);
	color: var(--invitely-accent);
}

.invitely-tabs__tab:focus-visible {
	outline: 2px solid var(--invitely-accent);
	outline-offset: 2px;
}

.invitely-tabpanel[hidden] {
	display: none;
}

/* The first section in a panel does not need the gap that separates sections
   from one another. */
.invitely-tabpanel > .invitely-toggles:first-child {
	margin-top: 0;
}

@media ( max-width: 640px ) {
	.invitely-tabs {
		gap: 0.25rem;
	}

	.invitely-tabs__tab {
		padding: 0.4rem 0.6rem;
		font-size: 0.86rem;
	}
}

/* Slider readouts. */
.invitely-range__value {
	display: inline-block;
	margin-top: 0.2rem;
	padding: 0.1rem 0.4rem;
	background: var(--invitely-paper);
	border: 1px solid var(--invitely-line);
	border-radius: 5px;
	color: var(--invitely-ink);
	font-family: Menlo, Consolas, monospace;
	font-size: 0.76rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.invitely-look__select,
.invitely-frame__control {
	align-items: flex-start;
}

.invitely-fileerror {
	margin: 0.45rem 0 0;
	padding: 0.5rem 0.65rem;
	background: #fbeeec;
	border-left: 3px solid #a3352a;
	border-radius: 6px;
	color: #7a2620;
	font-size: 0.88rem;
}

.invitely-fileerror[hidden] {
	display: none;
}

/* Paid toggle in the guest list. */
/*
 * Paid and unpaid read at a glance down a long list, which a single muted pill
 * did not. Colour alone is not the whole signal: the words stay, so the state
 * survives being printed, screenshotted, or seen by someone who does not
 * separate red from green.
 */
/*
 * The class is repeated and the colours forced.
 *
 * A theme's own button styling beat the single-class rule, and because that
 * styling has no hover state, the colours appeared only while the pointer was
 * over the button. Anything a theme sets on `button` has to be outranked here
 * or the state is invisible in the one place it matters.
 */
.invitely .invitely-paid.invitely-paid {
	padding: 0.25rem 0.7rem;
	background: #fbeeec !important;
	border: 1px solid #d9a49c !important;
	border-radius: 999px;
	color: #8a2e22 !important;
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	white-space: nowrap;
	text-shadow: none;
	box-shadow: none;
}

.invitely .invitely-paid.invitely-paid.is-paid {
	background: #e4f3ea !important;
	border-color: #86bf9f !important;
	color: #1c6b41 !important;
}

.invitely .invitely-paid.invitely-paid:hover {
	background: #f6e0dc !important;
	border-color: #b8564a !important;
}

.invitely .invitely-paid.invitely-paid.is-paid:hover {
	background: #d6ecdf !important;
	border-color: #4f9d73 !important;
}

.invitely .invitely-paid.invitely-paid:focus-visible {
	outline: 2px solid var(--invitely-accent);
	outline-offset: 2px;
}

.invitely-paidcell {
	white-space: nowrap;
}

.invitely-relink {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--invitely-line);
	border-radius: var(--invitely-radius);
}

.invitely-relink summary {
	cursor: pointer;
	font-weight: 600;
}

.invitely-relink form {
	display: block;
	margin: 0.75rem 0 0;
}

.invitely-relink .invitely-btn {
	margin-top: 0.6rem;
}

/* ------------------------------------------------------ Preview width switch */

.invitely-preview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.invitely-preview__bar .invitely-preview__label {
	margin: 0;
}

.invitely-devices {
	display: flex;
	gap: 0.25rem;
}

.invitely-devices__btn {
	padding: 0.3rem 0.7rem;
	background: transparent;
	border: 1px solid var(--invitely-line);
	border-radius: 999px;
	color: var(--invitely-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.82rem;
}

.invitely-devices__btn.is-current {
	background: var(--invitely-accent);
	border-color: var(--invitely-accent);
	color: #fff;
}

/* A phone-width frame is centred rather than pinned left, and marked as a
   device so it does not read as a broken desktop layout. */
.invitely-pageframe.is-phone {
	display: flex;
	justify-content: center;
	background: var(--invitely-line);
	padding: 0.75rem 0;
}

.invitely-pageframe.is-phone iframe {
	box-shadow: 0 2px 14px rgba( 0, 0, 0, 0.18 );
	border-radius: 10px;
}

/* Who can already get in, and who has been asked. */
.invitely-cohosts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

.invitely-cohost {
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-size: 0.8rem;
}

.invitely-cohost.is-active {
	background: var(--invitely-accent-soft);
	color: var(--invitely-accent);
}

.invitely-cohost.is-waiting {
	background: #fbf3e6;
	color: #8a6417;
}

.invitely-cohost.is-waiting::after {
	content: " · waiting to sign up";
	opacity: 0.75;
}

.invitely-cohost__resend {
	margin-left: 0.35rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.75rem;
	text-decoration: underline;
}

/* What a signed-out visitor sees on the dashboard page. */
.invitely-signedout {
	max-width: 34rem;
	margin-inline: auto;
	text-align: center;
}

.invitely-signedout h2 {
	margin: 0 0 0.5rem;
}

/*
 * Stacked, not side by side. Signing in and creating an account are not two
 * equal choices: almost everyone here already has an account, so the second
 * belongs underneath as the alternative it is.
 */
.invitely-signedout__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0 0;
}

/*
 * Elementor publishes its global palette as custom properties, so the button
 * follows whatever the site's primary colour is set to rather than carrying a
 * second opinion about it. The plugin's own accent is the fallback for sites
 * without Elementor.
 */
.invitely .invitely-signedout__actions .invitely-btn {
	min-width: 13rem;
	background: var(--e-global-color-primary, var(--invitely-accent));
	border-color: var(--e-global-color-primary, var(--invitely-accent));
	text-align: center;
}

.invitely .invitely-signedout__actions .invitely-btn--ghost {
	background: transparent;
	color: var(--e-global-color-primary, var(--invitely-accent));
}