/* StayCierge Revenue Calculator
   Everything is scoped under .scrc so it cannot leak into the theme,
   and the theme cannot leak into it. */

.scrc {
	--scrc-ink: #1f1f1f;
	--scrc-ink-2: #666666;
	--scrc-ink-3: #9d9d9d;
	--scrc-navy: #0a2a45;
	--scrc-surface: #ffffff;
	--scrc-surface-2: #f0f2f4;
	--scrc-line: #e3e6ea;
	--scrc-series: #1a5c96;
	--scrc-series-soft: #e8eff6;
	--scrc-danger: #b3261e;
	--scrc-radius: 10px;
	--scrc-font: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

	font-family: var(--scrc-font);
	color: var(--scrc-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-align: left;
}

.scrc *,
.scrc *::before,
.scrc *::after { box-sizing: border-box; }

.scrc-wrap { max-width: 760px; margin: 0 auto; padding: 8px 0 24px; }

.scrc-flag {
	background: var(--scrc-navy); color: #fff; font-size: 12px; letter-spacing: .04em;
	padding: 10px 20px; text-align: center; font-weight: 400; border-radius: 8px; margin-bottom: 14px;
}

.scrc-card {
	background: var(--scrc-surface); border-radius: 16px; padding: 36px;
	border: 1px solid var(--scrc-line);
	box-shadow: 0 1px 2px rgba(31,31,31,.04), 0 8px 24px rgba(31,31,31,.04);
}

.scrc-hide { display: none !important; }
.scrc-center { text-align: center; }
.scrc-mt { margin-top: 7px; }
.scrc-mb { margin-bottom: 20px; }

.scrc .scrc-h1 {
	font-family: var(--scrc-font);
	font-size: clamp(26px, 4.6vw, 40px); font-weight: 600; letter-spacing: -.02em;
	line-height: 1.15; margin: 0 0 14px; color: var(--scrc-ink); text-transform: none;
}
.scrc .scrc-h1-sm { font-size: clamp(22px, 3.4vw, 28px); }
.scrc .scrc-h1 em { font-style: normal; color: var(--scrc-series); }

.scrc .scrc-h2 {
	font-family: var(--scrc-font);
	font-size: 19px; font-weight: 600; letter-spacing: -.01em;
	margin: 0 0 6px; color: var(--scrc-ink); text-transform: none; line-height: 1.35;
}

.scrc .scrc-sub {
	color: var(--scrc-ink-2); font-size: 16px; margin: 0 0 32px; max-width: 52ch;
}

.scrc .scrc-label {
	display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px;
	letter-spacing: .01em; color: var(--scrc-ink); text-transform: none;
}
.scrc .scrc-hint { font-weight: 400; color: var(--scrc-ink-3); font-size: 12px; margin: 0; }
.scrc-field { margin-bottom: 22px; }

.scrc .scrc-input {
	width: 100%; font-family: inherit; font-size: 16px; padding: 14px 16px;
	border: 1px solid var(--scrc-line); border-radius: var(--scrc-radius);
	background: var(--scrc-surface); color: var(--scrc-ink); line-height: 1.4;
	transition: border-color .15s, box-shadow .15s; margin: 0; height: auto; box-shadow: none;
}
.scrc .scrc-input:focus {
	outline: none; border-color: var(--scrc-series);
	box-shadow: 0 0 0 3px var(--scrc-series-soft);
}
.scrc .scrc-input[aria-invalid="true"] { border-color: var(--scrc-danger); }
.scrc .scrc-input::placeholder { color: var(--scrc-ink-3); }
/* Kill the number spinners so the fields read as plain money inputs. */
.scrc .scrc-input[type=number]::-webkit-outer-spin-button,
.scrc .scrc-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.scrc .scrc-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.scrc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.scrc .scrc-chip {
	font-family: inherit; font-size: 15px; padding: 11px 20px;
	border: 1px solid var(--scrc-line); border-radius: var(--scrc-radius);
	background: var(--scrc-surface); cursor: pointer; transition: all .15s;
	color: var(--scrc-ink); line-height: 1.2; text-transform: none;
	letter-spacing: 0; font-weight: 400; box-shadow: none; height: auto; width: auto;
}
.scrc .scrc-chip:hover { border-color: var(--scrc-ink-3); background: var(--scrc-surface); color: var(--scrc-ink); }
.scrc .scrc-chip[aria-pressed="true"] { background: var(--scrc-ink); color: #fff; border-color: var(--scrc-ink); }

.scrc-prefix { position: relative; }
.scrc-prefix > span {
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	color: var(--scrc-ink-2); font-size: 16px; pointer-events: none; z-index: 1;
}
.scrc-prefix .scrc-input { padding-left: 32px; }

.scrc .scrc-btn {
	display: block; width: 100%; font-family: inherit; font-size: 16px; font-weight: 500;
	padding: 17px; border: none; border-radius: var(--scrc-radius);
	background: var(--scrc-ink); color: #fff; cursor: pointer;
	transition: opacity .15s; text-transform: none; letter-spacing: 0;
	line-height: 1.3; height: auto; box-shadow: none; text-decoration: none;
}
.scrc .scrc-btn:hover { opacity: .88; background: var(--scrc-ink); color: #fff; }
.scrc .scrc-btn[disabled] { opacity: .5; cursor: default; }

.scrc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 600px) {
	.scrc-row { grid-template-columns: 1fr; gap: 0; }
	.scrc-card { padding: 22px; border-radius: 12px; }
}

.scrc-err { color: var(--scrc-danger); font-size: 13px; margin: 7px 0 0; }
.scrc-err-block { margin-top: 12px; text-align: center; }

.scrc-hero {
	font-size: clamp(32px, 6.4vw, 50px); font-weight: 600; letter-spacing: -.03em;
	line-height: 1.05; color: var(--scrc-ink); margin: 6px 0;
}
.scrc-eyebrow {
	font-size: 12px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
	color: var(--scrc-ink-2); margin: 0;
}

.scrc-gapbox { background: var(--scrc-series-soft); border-radius: 12px; padding: 22px 24px; margin: 26px 0; }
.scrc-gapbox .scrc-eyebrow { color: var(--scrc-series); }
.scrc-gapbox .scrc-v {
	font-size: 30px; font-weight: 600; letter-spacing: -.02em;
	color: var(--scrc-navy); margin-top: 4px;
}

.scrc-tiles {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px;
	background: var(--scrc-line); border: 1px solid var(--scrc-line);
	border-radius: 12px; overflow: hidden; margin: 14px 0 4px;
}
.scrc-tile { background: var(--scrc-surface); padding: 16px 18px; }
.scrc-tile .scrc-k {
	font-size: 11px; color: var(--scrc-ink-2); letter-spacing: .04em;
	text-transform: uppercase; margin-bottom: 5px;
}
.scrc-tile .scrc-v { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }

.scrc .scrc-note { font-size: 13px; color: var(--scrc-ink-2); line-height: 1.6; margin: 0; }
.scrc .scrc-hr { border: none; border-top: 1px solid var(--scrc-line); margin: 30px 0; height: 0; background: none; }

.scrc-viz { margin: 18px 0 6px; position: relative; }
.scrc-viz svg { width: 100%; height: auto; display: block; overflow: visible; }
.scrc-dot { fill: var(--scrc-ink-3); opacity: .55; stroke: var(--scrc-surface); stroke-width: 2; }
.scrc-dot:hover { opacity: 1; }
.scrc-you { fill: var(--scrc-series); stroke: var(--scrc-surface); stroke-width: 2; }
.scrc-axis { stroke: var(--scrc-line); stroke-width: 1; }
.scrc-tick { fill: var(--scrc-ink-3); font-size: 11px; }
.scrc-dlabel { fill: var(--scrc-series); font-size: 12px; font-weight: 600; }
.scrc-dlabel-2 { fill: var(--scrc-ink-2); font-size: 11px; }

.scrc-tip {
	position: absolute; pointer-events: none; background: var(--scrc-ink); color: #fff;
	font-size: 12px; padding: 8px 11px; border-radius: 8px; opacity: 0;
	transition: opacity .12s; transform: translate(-50%, -125%);
	white-space: nowrap; z-index: 5; line-height: 1.45;
}
.scrc-tip b { font-weight: 600; }

.scrc-details { margin-top: 14px; font-size: 13px; }
.scrc-details summary { cursor: pointer; color: var(--scrc-series); font-weight: 500; }
.scrc-tablewrap { overflow-x: auto; }
.scrc .scrc-table {
	width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px;
	background: none; border: none;
}
.scrc .scrc-table th,
.scrc .scrc-table td {
	text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--scrc-line);
	border-left: none; border-right: none; border-top: none; background: none;
}
.scrc .scrc-table th { font-weight: 500; color: var(--scrc-ink-2); }
.scrc .scrc-table td.scrc-num,
.scrc .scrc-table th.scrc-num { text-align: right; font-variant-numeric: tabular-nums; }
.scrc .scrc-table tr.scrc-me td { background: var(--scrc-series-soft); font-weight: 600; }

.scrc-disc { font-size: 12px; color: var(--scrc-ink-3); line-height: 1.6; margin: 20px 0 0; }
.scrc-src { font-size: 11.5px; color: var(--scrc-ink-3); letter-spacing: .02em; margin: 6px 0 0; }

/* ---- analysing screen ---- */
.scrc-calcmsg {
	text-align: center; font-size: 19px; font-weight: 500;
	margin: 10px 0 22px; letter-spacing: -.01em; color: var(--scrc-ink);
}
.scrc-track {
	width: min(340px, 80%); height: 3px; background: var(--scrc-line);
	border-radius: 2px; margin: 26px auto 0; overflow: hidden;
}
.scrc-bar { height: 100%; width: 0; background: var(--scrc-series); border-radius: 2px; }

.scrc-feed {
	border: 1px solid var(--scrc-line); border-radius: 12px; margin-top: 26px;
	overflow: hidden; background: var(--scrc-surface);
}
.scrc-feedhead {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	padding: 11px 16px; background: var(--scrc-surface-2);
	border-bottom: 1px solid var(--scrc-line); font-size: 12px;
	color: var(--scrc-ink-2); letter-spacing: .03em; text-transform: uppercase;
}
.scrc-count { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrc-feedhead b { color: var(--scrc-series); font-weight: 600; }
.scrc-feedbody { height: 196px; overflow: hidden; position: relative; }

.scrc-frow {
	display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px;
	font-size: 13px; border-bottom: 1px solid var(--scrc-line);
	animation: scrc-fin .35s ease both;
}
.scrc-frow .scrc-fn { color: var(--scrc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scrc-frow .scrc-fv { color: var(--scrc-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrc-frow .scrc-fv b { color: var(--scrc-ink); font-weight: 600; }

@keyframes scrc-fin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.scrc-ok {
	background: #f4f8f4; border-radius: 12px; padding: 20px 22px;
	margin: 26px 0; font-size: 14px; color: var(--scrc-ink); line-height: 1.6;
}

/* honeypot — hidden from people, visible to naive bots */
.scrc-hp {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.scrc-frow { animation: none; }
	.scrc-bar { transition: none !important; }
}