/**
 * The plugin's admin styling.
 *
 * Everything is scoped under .embedsheets-wrap. A WordPress admin screen is
 * shared with the core stylesheet, the active theme's admin additions and
 * whatever else is installed, so a bare `.card` or `.btn` here would be a bug
 * on somebody's site rather than a style on ours - and equally, a theme like
 * Astra restyling `.button` must not reach in and change these.
 *
 * The colours are the builder's own, so the two products look like one.
 */

.embedsheets-wrap {
	--es-primary: #00a862;
	--es-primary-hover: #05cf7b;
	--es-primary-soft: rgba(0, 193, 113, .11);
	--es-primary-strong: #046b41;
	--es-primary-border: #b4e6cf;

	--es-text: #1f2937;
	--es-text-muted: #6b7280;
	--es-surface: #fff;
	--es-surface-alt: #f6f8fa;
	--es-border: #e7ebef;

	--es-danger-soft: #fef2f2;
	--es-danger-border: #fecaca;
	--es-danger-strong: #991b1b;

	--es-radius: 16px;
	--es-radius-sm: 10px;
	--es-ink: #0a1a24;          /* the dark panel */
	--es-ink-2: #0f2733;
	--es-tint: #eafaf1;         /* an icon tile, a corner blob */
	--es-tint-warm: #fdeeea;
	--es-warm: #e5533d;
	--es-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);

	margin-right: 20px;
	color: var(--es-text);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * The page itself
 *
 * The admin's grey ground is painted on elements this plugin does not own, so
 * it cannot be reached from inside .embedsheets-wrap - the wrap sits on top of
 * it. body.embedsheets-page is added only on our own screens (see
 * EmbedSheets_Admin::body_class), which is what keeps this off everybody
 * else's.
 *
 * White throughout, per the brief: the cards carry a border and a soft shadow,
 * so they still read as cards without a grey field behind them.
 * ------------------------------------------------------------------------ */

body.embedsheets-page,
body.embedsheets-page #wpwrap,
body.embedsheets-page #wpcontent,
body.embedsheets-page #wpbody,
body.embedsheets-page #wpbody-content,
body.embedsheets-page #wpfooter {
	background: #fff;
}

/* The footer's rule would otherwise draw a grey line across the white. */
body.embedsheets-page #wpfooter { border-top: 1px solid var(--es-border, #e7ebef); }

/*
 * Core prints its own notices above our heading with margins tuned for the
 * grey ground. Pulled in line with the rest of the page.
 */
body.embedsheets-page .wrap > .notice {
	margin: 0 0 20px;
	border-radius: var(--es-radius-sm, 10px);
}

.embedsheets-wrap * { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
 * The bar at the top of every screen
 * ------------------------------------------------------------------------ */

.embedsheets-head {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
	justify-content: space-between;
	margin: 0 0 24px;
	padding: 4px 0 20px;
	border-bottom: 1px solid var(--es-border);
}

.embedsheets-head__text { min-width: 0; }

/*
 * The heading carries the page, so it is sized and weighted to. WordPress's
 * own .wrap h1 is 23px at weight 400, which reads as a label rather than as a
 * title - and beside cards with 21px bold headings of their own, the page
 * heading was the quietest thing on the screen.
 */
.embedsheets-wrap .embedsheets-head__title {
	margin: 0;
	padding: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--es-ink);
}

/* The logo, where the heading would be. Sized to the same optical weight. */
.embedsheets-head__logo {
	display: block;
	width: auto;
	height: 40px;
	margin: 0 0 2px;
}

.embedsheets-head__sub {
	margin: 8px 0 0;
	max-width: 68ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--es-text-muted);
}

.embedsheets-head__actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
 * Buttons
 *
 * Shopify-ish: a solid brand button, a quiet outlined one beside it. Named so
 * they cannot collide with core's .button or a theme's .btn.
 * ------------------------------------------------------------------------ */

.embedsheets-wrap .embedsheets-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 36px;
	padding: 7px 16px;
	border: 1px solid transparent;
	border-radius: var(--es-radius-sm);
	background: transparent;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.embedsheets-wrap .embedsheets-btn:focus-visible {
	outline: 2px solid var(--es-primary);
	outline-offset: 2px;
}

.embedsheets-wrap .embedsheets-btn--primary {
	background: var(--es-primary);
	border-color: var(--es-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 78, 45, .16);
}

.embedsheets-wrap .embedsheets-btn--primary:hover {
	background: var(--es-primary-hover);
	border-color: var(--es-primary-hover);
	color: #fff;
}

.embedsheets-wrap .embedsheets-btn--ghost {
	background: var(--es-surface);
	border-color: var(--es-border);
	color: var(--es-text);
}

.embedsheets-wrap .embedsheets-btn--ghost:hover {
	background: var(--es-surface-alt);
	border-color: #cfd6dd;
	color: var(--es-text);
}

.embedsheets-wrap .embedsheets-btn--sm {
	min-height: 30px;
	padding: 4px 11px;
	font-size: 12.5px;
}

.embedsheets-wrap .embedsheets-btn[disabled] { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------ */

.embedsheets-card {
	margin: 0 0 20px;
	padding: 22px 24px;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
}

.embedsheets-card > :first-child { margin-top: 0; }
.embedsheets-card > :last-child { margin-bottom: 0; }

.embedsheets-card h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--es-ink);
}

.embedsheets-card--empty {
	text-align: center;
	padding: 44px 24px;
}

.embedsheets-card--empty h2 { font-size: 20px; }

.embedsheets-card--empty p {
	max-width: 52ch;
	margin: 0 auto 18px;
	color: var(--es-text-muted);
}

.embedsheets-card--error {
	background: var(--es-danger-soft);
	border-color: var(--es-danger-border);
	color: var(--es-danger-strong);
}

.embedsheets-card--error p { margin: 0 0 12px; }
.embedsheets-card--error p:last-child { margin: 0; }

.embedsheets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
	margin: 0 0 20px;
}

/* ---------------------------------------------------------------------------
 * The connection panel
 * ------------------------------------------------------------------------ */

.embedsheets-connect {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}

.embedsheets-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}

.embedsheets-status--on {
	background: var(--es-primary-soft);
	border: 1px solid var(--es-primary-border);
	color: var(--es-primary-strong);
}

.embedsheets-status--off {
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
}

.embedsheets-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.embedsheets-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 7px 18px;
	margin: 16px 0 0;
	font-size: 13px;
}

.embedsheets-facts dt { color: var(--es-text-muted); }
.embedsheets-facts dd { margin: 0; font-weight: 600; word-break: break-word; }

/* ---------------------------------------------------------------------------
 * Getting started
 * ------------------------------------------------------------------------ */

.embedsheets-steps {
	counter-reset: es-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.embedsheets-steps li {
	counter-increment: es-step;
	position: relative;
	margin: 0 0 18px;
	padding-left: 42px;
}

.embedsheets-steps li:last-child { margin-bottom: 0; }

.embedsheets-steps li::before {
	content: counter(es-step);
	position: absolute;
	left: 0;
	top: -1px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--es-primary-soft);
	border: 1px solid var(--es-primary-border);
	color: var(--es-primary-strong);
	font-size: 13px;
	font-weight: 700;
}

.embedsheets-steps strong { display: block; margin-bottom: 2px; }
.embedsheets-steps p { margin: 0; color: var(--es-text-muted); }

/* ---------------------------------------------------------------------------
 * Numbers
 * ------------------------------------------------------------------------ */

.embedsheets-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 0 0 20px;
}

.embedsheets-stat {
	padding: 18px 20px;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
}

.embedsheets-stat__label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--es-text-muted);
}

.embedsheets-stat__value {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/* A bar chart drawn in CSS - no library for eight rectangles. */
.embedsheets-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 160px;
	margin: 8px 0 0;
	padding: 0 0 4px;
}

.embedsheets-chart__bar {
	width: 100%;
	min-height: 2px;
	border-radius: 3px 3px 0 0;
	background: var(--es-primary);
	opacity: .85;
	transition: opacity .12s ease;
}

.embedsheets-chart__col:hover .embedsheets-chart__bar { opacity: 1; }

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

.embedsheets-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.embedsheets-table th {
	padding: 10px 12px;
	border-bottom: 1px solid var(--es-border);
	text-align: left;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--es-text-muted);
}

.embedsheets-table td {
	padding: 13px 12px;
	border-bottom: 1px solid #eef1f4;
	vertical-align: top;
}

.embedsheets-table tr:last-child td { border-bottom: 0; }
.embedsheets-table__scroll { overflow-x: auto; }

/* ---------------------------------------------------------------------------
 * A calculator, as a card
 * ------------------------------------------------------------------------ */

.embedsheets-form-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
}

.embedsheets-form-card__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 600;
}

.embedsheets-form-card__meta {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--es-text-muted);
}

.embedsheets-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.embedsheets-badge--live {
	background: var(--es-primary-soft);
	color: var(--es-primary-strong);
}

.embedsheets-badge--draft { background: #f3f4f6; color: #4b5563; }

/* The shortcode, in a box built to be copied out of. */
.embedsheets-code {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	padding: 8px 10px;
	background: var(--es-surface-alt);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
}

/*
 * The shortcode is truncated rather than scrolled.
 *
 * A scrollbar inside a card invites somebody to drag it and read the rest,
 * which is the one thing they should never need to do: the string is not for
 * reading, it is for copying, and the button beside it copies all of it
 * whatever is on screen.
 */
.embedsheets-code code {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0;
	background: none;
	font-size: 12.5px;
	white-space: nowrap;
	color: var(--es-text);
}

.embedsheets-code .embedsheets-btn { flex: 0 0 auto; }

.embedsheets-form-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
 * A template, as a card
 * ------------------------------------------------------------------------ */

.embedsheets-tpl {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
	text-decoration: none;
	color: inherit;
	transition: box-shadow .15s ease, transform .15s ease;
}

.embedsheets-tpl:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(16, 24, 40, .06), 0 12px 24px rgba(16, 24, 40, .08);
	color: inherit;
}

.embedsheets-tpl__shot {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--es-surface-alt);
	border-bottom: 1px solid var(--es-border);
}

.embedsheets-tpl__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

.embedsheets-tpl__body { padding: 14px 16px 18px; }

.embedsheets-tpl__title {
	margin: 0 0 4px;
	font-size: 14.5px;
	font-weight: 600;
}

.embedsheets-tpl__summary {
	margin: 0;
	font-size: 13px;
	color: var(--es-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * Filters
 * ------------------------------------------------------------------------ */

.embedsheets-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 18px;
}

.embedsheets-wrap .embedsheets-filters select,
.embedsheets-wrap .embedsheets-filters input[type="search"] {
	min-height: 36px;
	padding: 5px 11px;
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
	background: var(--es-surface);
	font-size: 13.5px;
	color: var(--es-text);
	box-shadow: none;
}

.embedsheets-wrap .embedsheets-filters input[type="search"] { min-width: 240px; }

.embedsheets-pager {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: flex-end;
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--es-text-muted);
}

.embedsheets-empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--es-text-muted);
}

.embedsheets-busy { opacity: .5; pointer-events: none; }

/* One answer inside a lead row. */
.embedsheets-answers { margin: 0; font-size: 13px; }
.embedsheets-answers div { margin-bottom: 3px; }
.embedsheets-answers span { color: var(--es-text-muted); }

/* ---------------------------------------------------------------------------
 * The deactivation dialog
 *
 * Printed on the plugins list, which is NOT one of our screens - so it carries
 * .embedsheets-wrap itself to pick up the variables above.
 * ------------------------------------------------------------------------ */

.embedsheets-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
}

.embedsheets-modal[hidden] { display: none; }

.embedsheets-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .55);
}

.embedsheets-modal__box {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	padding: 28px;
	background: #fff;
	border-radius: var(--es-radius, 12px);
	box-shadow: 0 20px 48px rgba(16, 24, 40, .24);
	margin-right: 0;
}

.embedsheets-modal__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--es-text-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.embedsheets-modal__x:hover { background: var(--es-surface-alt); }

.embedsheets-modal__title { margin: 0 0 6px; font-size: 19px; font-weight: 600; }

.embedsheets-modal__lead {
	margin: 0 0 18px;
	color: var(--es-text-muted);
}

.embedsheets-reasons {
	display: grid;
	gap: 2px;
	margin: 0 0 14px;
}

.embedsheets-reason {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 9px 11px;
	border-radius: var(--es-radius-sm);
	cursor: pointer;
	transition: background-color .12s ease;
}

.embedsheets-reason:hover { background: var(--es-surface-alt); }
.embedsheets-reason input { margin: 3px 0 0; flex-shrink: 0; }

.embedsheets-reason__more { margin: 0 0 18px; }
.embedsheets-reason__more[hidden] { display: none; }

.embedsheets-reason__prompt {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
}

.embedsheets-modal__box textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
	font-size: 13.5px;
	font-family: inherit;
	resize: vertical;
}

.embedsheets-modal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 16px;
}

.embedsheets-modal__note {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--es-border);
	font-size: 12.5px;
	color: var(--es-text-muted);
}

/* ---------------------------------------------------------------------------
 * Narrow screens
 * ------------------------------------------------------------------------ */

@media screen and (max-width: 782px) {
	.embedsheets-wrap { margin-right: 10px; }
	.embedsheets-head { flex-direction: column; }
	.embedsheets-head__actions { width: 100%; }
	.embedsheets-head__actions .embedsheets-btn { flex: 1 1 auto; }
	.embedsheets-grid { grid-template-columns: 1fr; }
	.embedsheets-modal__actions .embedsheets-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * The dark panel
 *
 * The product's own hero, brought inside the admin: a deep ground, a headline
 * with one word in brand green, and the two things somebody can do next. Used
 * where a screen is really an invitation rather than a report - the dashboard
 * before a site is connected, and the empty states.
 * ------------------------------------------------------------------------ */

.embedsheets-hero {
	position: relative;
	overflow: hidden;
	margin: 0 0 22px;
	padding: 44px 48px;
	border-radius: var(--es-radius);
	background:
		radial-gradient(120% 140% at 88% 12%, rgba(5, 207, 123, .16) 0%, transparent 55%),
		linear-gradient(140deg, var(--es-ink) 0%, var(--es-ink-2) 100%);
	color: #fff;
}

.embedsheets-hero__title {
	max-width: 18ch;
	margin: 0 0 14px;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -.02em;
	color: #fff;
}

/* The one word that carries the brand. */
.embedsheets-hero__title em {
	font-style: normal;
	color: var(--es-primary-hover);
}

.embedsheets-hero__lead {
	max-width: 56ch;
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, .74);
}

.embedsheets-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 22px;
}

/* A quiet button that still reads on a dark ground. */
.embedsheets-wrap .embedsheets-btn--dark {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(255, 255, 255, .22);
	color: #fff;
}

.embedsheets-wrap .embedsheets-btn--dark:hover {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .34);
	color: #fff;
}

.embedsheets-wrap .embedsheets-btn--lg {
	min-height: 46px;
	padding: 11px 24px;
	font-size: 15px;
	border-radius: var(--es-radius-sm);
}

/* The reassurances under the buttons: green tick, quiet text. */
.embedsheets-ticks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .7);
}

.embedsheets-ticks li { display: flex; align-items: center; gap: 8px; }

.embedsheets-ticks li::before {
	content: "✓";
	color: var(--es-primary-hover);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * A feature card
 *
 * The shape from the reference: a tinted rounded-square holding an icon, a
 * large title, a line of muted copy, an arrow link, and a pale quarter-circle
 * bleeding out of the top-right corner.
 * ------------------------------------------------------------------------ */

.embedsheets-feature {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 26px 26px 24px;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
}

/*
 * The corner blob. Drawn rather than an image, so it takes the card's own
 * accent - and so a card can be warm instead of green by setting one variable.
 */
.embedsheets-feature::after {
	content: "";
	position: absolute;
	top: -46px;
	right: -46px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: var(--es-feature-tint, var(--es-tint));
	pointer-events: none;
}

.embedsheets-feature > * { position: relative; z-index: 1; }

.embedsheets-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0 0 18px;
	border-radius: 11px;
	background: var(--es-feature-tint, var(--es-tint));
	color: var(--es-feature-ink, var(--es-primary));
	font-size: 18px;
	line-height: 1;
}

.embedsheets-feature__title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--es-text);
}

.embedsheets-feature__text {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--es-text-muted);
}

/* The green "Explore forms →" link. */
.embedsheets-wrap .embedsheets-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--es-feature-ink, var(--es-primary));
}

.embedsheets-wrap .embedsheets-link::after {
	content: "→";
	transition: transform .15s ease;
}

.embedsheets-wrap .embedsheets-link:hover { text-decoration: none; }
.embedsheets-wrap .embedsheets-link:hover::after { transform: translateX(3px); }

/* A card that is about leads rather than building - warm, not green. */
.embedsheets-feature--warm {
	--es-feature-tint: var(--es-tint-warm);
	--es-feature-ink: var(--es-warm);
}

/*
 * The little preview panel at the foot of a card. In the reference it holds a
 * miniature of the thing being described; here it holds a real figure, which
 * is better than a picture of one.
 */
.embedsheets-preview {
	margin: 20px -4px -4px;
	padding: 16px;
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
	box-shadow: 0 4px 14px rgba(16, 24, 40, .06);
}

.embedsheets-preview__label {
	margin: 0 0 4px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--es-text-muted);
}

.embedsheets-preview__value {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--es-primary-strong);
}

@media screen and (max-width: 782px) {
	.embedsheets-hero { padding: 30px 24px; }
	.embedsheets-hero__title { font-size: 26px; }
	.embedsheets-hero__actions .embedsheets-btn { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * List or grid
 *
 * Two ways of looking at the same calculators. The list is the default: most
 * accounts have more forms than fit on a screen as cards, and a list gets the
 * shortcode - the thing people come here for - onto one line each.
 * ------------------------------------------------------------------------ */

.embedsheets-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 18px;
}

.embedsheets-layouts {
	display: inline-flex;
	padding: 3px;
	background: var(--es-surface-alt);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
}

.embedsheets-wrap .embedsheets-layout {
	display: grid;
	place-items: center;
	width: 36px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--es-text-muted);
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
}

.embedsheets-wrap .embedsheets-layout:hover { color: var(--es-text); }

.embedsheets-wrap .embedsheets-layout.is-on {
	background: var(--es-surface);
	color: var(--es-primary);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}

.embedsheets-layout svg { width: 16px; height: 16px; display: block; }

/* The list itself: one calculator per row. */
.embedsheets-list {
	background: var(--es-surface);
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	box-shadow: var(--es-shadow);
	overflow: hidden;
}

.embedsheets-row {
	display: grid;
	grid-template-columns: minmax(180px, 1.4fr) auto minmax(220px, 1.6fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px 20px;
	border-bottom: 1px solid #eef1f4;
}

.embedsheets-row:last-child { border-bottom: 0; }
.embedsheets-row:hover { background: #fbfcfd; }

.embedsheets-row__name { min-width: 0; }

.embedsheets-row__title {
	margin: 0 0 2px;
	font-size: 14.5px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.embedsheets-row__meta { margin: 0; font-size: 12.5px; color: var(--es-text-muted); }

.embedsheets-row .embedsheets-code { margin: 0; }

.embedsheets-row__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Only one of the two is ever on screen. */
[data-embedsheets-view][hidden] { display: none; }

@media screen and (max-width: 960px) {
	.embedsheets-row {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.embedsheets-row__actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
 * The chart's tooltip
 *
 * The title attribute was doing this, badly: it waits about a second, it is
 * drawn by the operating system rather than the page, and on a bar two pixels
 * wide it is very easy to never see at all. Drawn here instead, so it appears
 * at once and reads like the rest of the screen.
 * ------------------------------------------------------------------------ */

.embedsheets-chart { position: relative; }

.embedsheets-chart__col { cursor: default; }

.embedsheets-chart__col::after {
	content: attr(data-label);
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	padding: 6px 10px;
	border-radius: 7px;
	background: var(--es-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s ease;
}

.embedsheets-chart__col:hover::after { opacity: 1; }

/*
 * A bar can be one pixel of a hundred and still needs to be hoverable, so the
 * whole column is the target and the coloured part is drawn inside it.
 */
.embedsheets-chart__col {
	position: relative;
	flex: 1 1 0;
	min-width: 3px;
	height: 100%;
	display: flex;
	align-items: flex-end;
}

/* ---------------------------------------------------------------------------
 * One lead, in full
 * ------------------------------------------------------------------------ */

.embedsheets-detail { margin: 0 0 20px; }

.embedsheets-detail:last-child { margin-bottom: 0; }

.embedsheets-detail__head {
	margin: 0 0 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--es-text-muted);
}

.embedsheets-detail__list {
	margin: 0;
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius-sm);
	overflow: hidden;
}

.embedsheets-detail__row {
	display: grid;
	grid-template-columns: minmax(120px, 40%) 1fr;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid #eef1f4;
	font-size: 13.5px;
}

.embedsheets-detail__row:last-child { border-bottom: 0; }
.embedsheets-detail__row:nth-child(odd) { background: #fbfcfd; }

.embedsheets-detail__key { color: var(--es-text-muted); word-break: break-word; }
.embedsheets-detail__val { font-weight: 600; word-break: break-word; }

/* The results read as figures, because that is what they are. */
.embedsheets-detail--results .embedsheets-detail__val { color: var(--es-primary-strong); }

.embedsheets-modal__box--wide { max-width: 640px; }

/* ---------------------------------------------------------------------------
 * The hero, with pictures beside it
 *
 * Two columns on a wide screen and one on a narrow one. The pictures are the
 * product itself, floated on the dark ground the way the marketing site does
 * it - which is also why they keep their own white background rather than
 * being tinted to match.
 * ------------------------------------------------------------------------ */

.embedsheets-hero--split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 40px;
	align-items: center;
}

.embedsheets-hero__body { min-width: 0; }

/*
 * The slides are stacked on top of each other, so the panel does not change
 * height as they change - and the aspect ratio is declared, so it does not
 * collapse before the first picture has loaded either.
 */
.embedsheets-shots { min-width: 0; }

.embedsheets-slides {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .32);
}

.embedsheets-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .7s ease;
}

.embedsheets-slide.is-on { opacity: 1; }

/* Under the picture, so nothing is covered and no backing is needed. */
.embedsheets-slides__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 16px 0 0;
}

.embedsheets-wrap .embedsheets-slides__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .28);
	cursor: pointer;
	transition: background-color .2s ease, width .2s ease;
}

.embedsheets-wrap .embedsheets-slides__dot:hover { background: rgba(255, 255, 255, .55); }

.embedsheets-wrap .embedsheets-slides__dot.is-on {
	width: 18px;
	border-radius: 999px;
	background: var(--es-primary-hover);
}

/*
 * Somebody who has asked their system not to animate things gets the pictures
 * without the crossfade. They still change - the point is what they show.
 */
@media (prefers-reduced-motion: reduce) {
	.embedsheets-slide { transition: none; }
}

@media screen and (max-width: 1100px) {
	.embedsheets-hero--split {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}


/* ---------------------------------------------------------------------------
   Classic Builder
   ---------------------------------------------------------------------------
   One card explaining who needs the older plugin, and a warning about what
   happens if WordPress replaces it. Both are built from the pieces the other
   screens already use; only the warning's colours are new, and they are named
   here rather than written into the markup so the page stays restyleable.
   --------------------------------------------------------------------------- */

.embedsheets-classic__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
}

/* The practical next step, quieter than the buttons it follows. */
.embedsheets-classic__hint {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--es-text-muted);
}

/*
 * A warning that is read rather than dismissed.
 *
 * Not WordPress's own .notice: those sit at the top of the screen above the
 * heading, and this one belongs after the download it is about - it only
 * matters once somebody has installed the thing.
 */
.embedsheets-callout {
	margin: 0 0 20px;
	padding: 20px 22px;
	border: 1px solid var(--es-border);
	border-radius: var(--es-radius);
	background: var(--es-surface-alt);
}

.embedsheets-callout > :first-child { margin-top: 0; }
.embedsheets-callout > :last-child { margin-bottom: 0; }

.embedsheets-callout h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--es-warning-strong, #92400e);
}

.embedsheets-callout p { margin: 0 0 10px; }
.embedsheets-callout p:last-child { margin: 0; }

.embedsheets-callout--warning {
	background: #fffbeb;
	border-color: #fde68a;
	color: #78350f;
}

/* The link into the Plugins screen, legible against the amber. */
.embedsheets-callout--warning a {
	color: #92400e;
	font-weight: 600;
	text-underline-offset: 2px;
}


/* ---------------------------------------------------------------------------
   Template sections
   ---------------------------------------------------------------------------
   Forms, Calculators, and everything else - each a couple of rows and a way
   through to that grouping in the library. The grid itself is unchanged; this
   is only what separates one section from the next.
   --------------------------------------------------------------------------- */

.embedsheets-tplsec { margin: 0 0 10px; }

.embedsheets-tplsec__title {
	margin: 0 0 14px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--es-ink);
}

/* Centred under its own section, so it reads as the end of that group rather
   than the start of the next one. */
.embedsheets-tplsec__more {
	margin: 0 0 26px;
	text-align: center;
}