/*
 * Portal styling.
 *
 * Deliberately restrained and mostly inherited: this renders inside whatever
 * theme the marketing site uses, and a plugin that imposes its own typography
 * on a page it does not own always looks like a plugin.
 */

.clab-pricing,
.clab-form,
.clab-account { max-width: 62rem; margin: 0 auto; }

.clab-form { max-width: 34rem; }

/* --- interval toggle --- */
.clab-interval-toggle {
	display: inline-flex; border: 1px solid currentColor; border-radius: 999px;
	padding: 2px; margin: 0 auto 2rem; opacity: .85;
}
.clab-pricing .clab-interval-toggle { display: flex; width: max-content; }
.clab-toggle {
	border: 0; background: transparent; color: inherit; font: inherit;
	padding: .4em 1.2em; border-radius: 999px; cursor: pointer;
}
.clab-toggle.is-on { background: currentColor; }
.clab-toggle.is-on { color: #fff; }
.clab-toggle.is-on::after { content: ''; }

/* --- plan grid --- */
.clab-plan-grid {
	display: grid; gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	align-items: start;
}
.clab-plan {
	border: 1px solid rgba(0,0,0,.15); border-radius: .6rem;
	padding: 1.5rem; position: relative; display: flex; flex-direction: column;
}
.clab-plan.is-featured { border-width: 2px; border-color: currentColor; }
.clab-plan-flag {
	position: absolute; top: -.75rem; left: 1.25rem;
	font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
	background: currentColor; color: #fff; padding: .2em .7em; border-radius: 999px;
}
.clab-plan-name { margin: 0 0 .25rem; }
.clab-plan-blurb { margin: 0 0 1rem; opacity: .75; font-size: .95rem; }
.clab-price { margin: 0 0 .25rem; }
.clab-amount { font-size: 2.4rem; font-weight: 700; line-height: 1; }
.clab-per { opacity: .7; }
.clab-saving { font-size: .85rem; opacity: .8; margin: .25rem 0 0; }
.clab-features { list-style: none; padding: 0; margin: 1.25rem 0; }
.clab-features li { padding: .3rem 0 .3rem 1.4rem; position: relative; }
.clab-features li::before { content: '✓'; position: absolute; left: 0; opacity: .6; }
.clab-plan-cta { margin-top: auto; }

/* --- forms --- */
.clab-field { margin: 0 0 1.1rem; }
.clab-field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.clab-field input[type="text"],
.clab-field input[type="email"],
.clab-field input[type="url"],
.clab-field input[type="password"] {
	width: 100%; padding: .6em .7em; font: inherit;
	border: 1px solid rgba(0,0,0,.25); border-radius: .35rem; background: #fff;
}
.clab-hint { display: block; font-size: .85rem; opacity: .7; margin-top: .25rem; }
.clab-centre { text-align: center; }
.clab-muted { opacity: .7; }

.clab-card-element {
	padding: .75em .7em; border: 1px solid rgba(0,0,0,.25);
	border-radius: .35rem; background: #fff;
}

/* --- plan picker --- */
.clab-plan-picker { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.clab-plan-option {
	display: flex; align-items: baseline; gap: .6rem; cursor: pointer;
	border: 1px solid rgba(0,0,0,.2); border-radius: .4rem; padding: .8rem 1rem;
}
.clab-plan-option.is-on { border-color: currentColor; border-width: 2px; padding: calc(.8rem - 1px) calc(1rem - 1px); }
.clab-plan-option-name { font-weight: 600; }
.clab-plan-option-price { margin-left: auto; opacity: .8; }

.clab-addons { margin-bottom: 1.5rem; }
.clab-addon { display: flex; gap: .6rem; padding: .5rem 0; cursor: pointer; }
.clab-addon-price { opacity: .8; margin-left: .4rem; }

.clab-total {
	display: flex; justify-content: space-between; align-items: baseline;
	border-top: 1px solid rgba(0,0,0,.15); padding-top: 1rem; margin: 1.5rem 0 1rem;
	font-size: 1.2rem;
}

/* --- buttons --- */
.clab-button {
	display: inline-block; text-align: center; font: inherit; font-weight: 600;
	padding: .7em 1.4em; border-radius: .35rem; border: 1px solid currentColor;
	background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.clab-button-primary { background: currentColor; border-color: currentColor; width: 100%; }
.clab-button-primary { color: #fff; }
.clab-button-primary:disabled { opacity: .6; cursor: default; }
.clab-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.clab-link-quiet { opacity: .65; font-size: .9rem; }

/* --- notices --- */
.clab-notice {
	border: 1px solid rgba(0,0,0,.2); border-left-width: 4px;
	padding: .8rem 1rem; border-radius: .3rem; margin: 0 0 1.2rem;
}
.clab-notice-error { border-left-color: #b32d2e; }
.clab-notice-warn { border-left-color: #b8860b; }

/* --- account --- */
.clab-sub-card { border: 1px solid rgba(0,0,0,.15); border-radius: .5rem; padding: 1.25rem; margin: 0 0 1.25rem; }
.clab-sub-card h3 { margin: 0 0 .25rem; }
.clab-sub-price { font-size: 1.3rem; font-weight: 600; margin: 0 0 .75rem; }
.clab-entitlements { list-style: none; padding: 0; margin: .75rem 0; }
.clab-entitlements li { padding: .15rem 0; }
.clab-table { width: 100%; border-collapse: collapse; }
.clab-table th, .clab-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid rgba(0,0,0,.12); }

.clab-addons-note { margin-top: 3rem; }

/* --- getting the plugin onto their site --- */
.clab-download {
	border: 1px solid rgba(0,0,0,.2); border-left-width: 4px; border-left-color: currentColor;
	border-radius: .35rem; padding: 1rem 1.2rem; margin: 1rem 0;
}
.clab-download h4 { margin: 0 0 .4rem; }
.clab-download p { margin: 0 0 .6rem; }
.clab-download p:last-child { margin-bottom: 0; }
.clab-download-done { border-left-color: rgba(0,0,0,.15); padding: .6rem 1.2rem; }

/* --- the one number that matters on the account page --- */
.clab-allowance { font-size: 1.05rem; margin: .75rem 0; }
.clab-report-count { font-size: 1.3rem; margin: .5rem 0 .25rem; }

/* ---------------------------------------------------------------------
   Asking "are you sure" in the page.

   Replaces window.confirm(), which is unstyleable, reads as a browser
   malfunction rather than part of the site, and puts the question in a
   different place from the thing being acted on.
   --------------------------------------------------------------------- */
.clab-confirm {
	border: 1px solid rgba(0, 0, 0, .18);
	border-left: 4px solid #b8860b;
	border-radius: 4px;
	padding: .9rem 1rem;
	margin-top: .75rem;
	background: rgba(0, 0, 0, .02);
}
.clab-confirm-title { font-weight: 600; margin: 0 0 .35rem; }
.clab-confirm-body { margin: 0 0 .75rem; font-size: .95rem; }
.clab-confirm-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.clab-confirm-actions .clab-button { width: auto; padding: .4rem .9rem; font-size: .95rem; }
.clab-confirm-actions .clab-button:disabled { opacity: .6; cursor: default; }
.clab-confirm-done { border-left-color: #1a7f37; }
.clab-confirm-failed { border-left-color: #b32d2e; }
.clab-confirm[hidden] { display: none; }

@media (prefers-color-scheme: dark) {
	.clab-confirm { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .18); }
}

/* ---------------------------------------------------------------------
   Payment: the card on file, the last payment, and replacing the card.
   --------------------------------------------------------------------- */
.clab-payment h3 { margin-top: 0; }
.clab-payment-card { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: baseline; }
.clab-payment-last { margin-bottom: 0; }
.clab-ok  { color: #1a7f37; font-weight: 700; }
.clab-bad { color: #b32d2e; font-weight: 700; }

.clab-card-panel {
	border: 1px solid rgba(0, 0, 0, .18);
	border-left: 4px solid #2271b1;
	border-radius: 4px;
	padding: .9rem 1rem;
	margin-top: .75rem;
	background: rgba(0, 0, 0, .02);
}
.clab-card-panel[hidden] { display: none; }
.clab-card-input {
	padding: .7rem .75rem;
	border: 1px solid rgba(0, 0, 0, .25);
	border-radius: 4px;
	background: #fff;
}
/* An author `display` rule beats the browser's own [hidden] rule, so a
   button given `hidden` by script stayed on screen reading "Saving…" after
   the payment had already gone through. Restate it where it matters. */
.clab-account [hidden] { display: none !important; }

/* The outcome is the most important line in the panel — not a hint. */
#clab-card-result { font-size: 1rem; opacity: 1; margin: .75rem 0 0; font-weight: 600; }

.clab-card-panel.is-done   { border-left-color: #1a7f37; }
.clab-card-panel.is-failed { border-left-color: #b32d2e; }

@media (prefers-color-scheme: dark) {
	.clab-card-panel { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .18); }
}

/* Letting Content Lab log in */
.clab-staff-manual { margin-top: 1rem; border: 1px solid rgba(0, 0, 0, .14); border-radius: 6px; padding: .2rem 1rem 1rem; }
.clab-staff-manual > summary { cursor: pointer; padding: .7rem 0 .3rem; font-weight: 600; }
.clab-staff-manual .clab-form { margin-top: 1rem; }

/* ---------------------------------------------------------------------
   Your websites. One row per site, its state as a pill, its own result
   line under it (a test result belongs next to the site it is about).
   --------------------------------------------------------------------- */
.clab-sites { margin: 1rem 0; }
.clab-sites-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.clab-sites-head h4 { margin: 0; }
.clab-sites-head .clab-muted { font-size: .9rem; }
.clab-sites-note { margin: .35rem 0 0; font-size: .9rem; }
.clab-site-list { list-style: none; margin: .75rem 0 0; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: .35rem; }
.clab-site { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; justify-content: space-between; padding: .8rem 1rem; border-top: 1px solid rgba(0, 0, 0, .1); }
/* The page sits inside a theme text block whose list items get a tick and a
   left indent (`.srb-text ul > li`). This is a list of websites, not bullet
   points; two classes outrank that rule without !important on the layout. */
.clab-site-list > .clab-site { padding-left: 1rem; margin: 0; }
.clab-site-list > .clab-site::before { content: none; display: none; }
.clab-site:first-child { border-top: 0; }
.clab-site-unlisted { background: rgba(34, 113, 177, .05); }
.clab-site-main { flex: 1 1 16rem; min-width: 0; }
.clab-site-name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.clab-site-name strong { overflow-wrap: anywhere; }
.clab-site-detail { font-size: .88rem; margin-top: .2rem; }
.clab-site-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.clab-site-result { margin-top: .5rem; padding: .5rem .75rem; border-left: 3px solid rgba(0, 0, 0, .25); font-size: .92rem; background: rgba(0, 0, 0, .025); }
.clab-site-result.is-ok  { border-left-color: #1a7f37; }
.clab-site-result.is-bad { border-left-color: #b32d2e; }
.clab-site .clab-confirm { flex-basis: 100%; margin-top: 0; }

.clab-button-sm { padding: .4rem .85rem; font-size: .9rem; width: auto; }

.clab-pill { display: inline-block; font-size: .75rem; font-weight: 600; line-height: 1.4; padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; opacity: .9; white-space: nowrap; }
.clab-pill-good { color: #1a7f37; }
.clab-pill-warn { color: #9a6700; }
.clab-pill-bad  { color: #b32d2e; }
.clab-pill-info { color: #2271b1; }
.clab-pill-plain { color: inherit; opacity: .6; }

.clab-site-add { margin-top: 1rem; }
.clab-site-add label { display: block; font-weight: 600; margin-bottom: .35rem; }
.clab-site-add-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.clab-site-add-row input { flex: 1 1 14rem; min-width: 0; font: inherit; padding: .6rem .75rem; border: 1px solid rgba(0, 0, 0, .25); border-radius: .35rem; }
.clab-site-add .clab-error { color: #b32d2e; margin: .5rem 0 0; font-size: .92rem; }
.clab-site-add .clab-confirm { margin-top: .75rem; }

@media (prefers-color-scheme: dark) {
	.clab-site-list, .clab-site { border-color: rgba(255, 255, 255, .16); }
	.clab-site-result { background: rgba(255, 255, 255, .04); }
	.clab-site-add-row input { border-color: rgba(255, 255, 255, .25); }
	.clab-pill-good { color: #4ac26b; }
	.clab-pill-warn { color: #d4a72c; }
	.clab-pill-bad  { color: #ff7b72; }
	.clab-pill-info { color: #58a6ff; }
}

/* ---------------------------------------------------------------------
   Another plan. Folded away until asked for.
   --------------------------------------------------------------------- */
.clab-add-plan > summary { cursor: pointer; list-style: none; }
.clab-add-plan > summary::-webkit-details-marker { display: none; }
.clab-add-plan > summary h3 { display: inline; margin: 0; }
.clab-add-plan > summary::after { content: '+'; float: right; font-size: 1.4rem; line-height: 1; opacity: .6; }
.clab-add-plan[open] > summary::after { content: '\2212'; }
.clab-add-plan[open] > summary { margin-bottom: .75rem; }
.clab-add-plan fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.clab-add-plan legend { font-weight: 600; margin-bottom: .4rem; padding: 0; }
.clab-add-plan label { font-weight: 400; }
.clab-plan-choice strong { font-weight: 700; }
.clab-plan-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .75rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: .35rem; margin-bottom: .4rem; cursor: pointer; }
.clab-plan-choice:has(input:checked) { border-color: currentColor; }
.clab-plan-choice input { margin-top: .3rem; }
.clab-plan-interval label, .clab-plan-addons label { display: inline-flex; gap: .4rem; align-items: center; margin-right: 1.25rem; }
.clab-plan-addons label { display: flex; margin: 0 0 .3rem; }
.clab-add-plan label[for="clab-add-plan-site"] { display: block; font-weight: 600; }
.clab-add-plan #clab-add-plan-site { display: block; width: 100%; max-width: 26rem; font: inherit; padding: .6rem .75rem; border: 1px solid rgba(0, 0, 0, .25); border-radius: .35rem; margin: .35rem 0 .5rem; }
#clab-add-plan-total { font-weight: 600; opacity: 1; font-size: 1rem; }
.clab-add-plan .clab-error { color: #b32d2e; }
.clab-plan-for { margin: .1rem 0 .5rem; font-size: .9rem; }
@media (prefers-color-scheme: dark) {
	.clab-plan-choice { border-color: rgba(255, 255, 255, .18); }
	.clab-add-plan label[for="clab-add-plan-site"] { display: block; font-weight: 600; }
.clab-add-plan #clab-add-plan-site { border-color: rgba(255, 255, 255, .25); }
}