/* Owen Pro — Deck Pro dashboard
   Scoped to .odp-portal so a host theme cannot bleed into it.

   Type and colour follow owenlumber.com: Cabin for text and controls,
   Gelasio for headings, and the red its calls to action use. The two brand
   colours are Settings fields, so they can be changed without touching this
   file — everything else reads from the tokens below. */

.odp-portal {
	--odp-ink: #111111;
	--odp-muted: #5f6368;
	--odp-line: #d9d9d9;
	--odp-bg: #f4f4f4;
	--odp-panel: #ffffff;
	--odp-brand: #de2000;
	--odp-accent: #111111;
	--odp-track: #d9d9d9;

	--odp-sans: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--odp-serif: "Gelasio", Georgia, "Times New Roman", serif;
	--odp-radius: 3px;

	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 16px 48px;
	color: var(--odp-ink);
	font-family: var(--odp-sans);
	font-size: 16px;
	line-height: 1.55;
}

.odp-portal *,
.odp-portal *::before,
.odp-portal *::after {
	box-sizing: inherit;
}

.odp-portal h1,
.odp-portal h2,
.odp-portal h3 {
	margin: 0;
	font-family: var(--odp-serif);
	line-height: 1.2;
	font-weight: 700;
}

/* ------------------------------------------------------------- header */

.odp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--odp-line);
	flex-wrap: wrap;
}

.odp-header__wordmark {
	display: inline-block;
	padding: 10px 18px;
	background: var(--odp-bg);
	border: 1px solid var(--odp-line);
	font-weight: 700;
	letter-spacing: 0.06em;
	font-size: 14px;
}

.odp-header__brand img {
	max-height: 44px;
	width: auto;
	display: block;
}

.odp-header__title {
	font-weight: 700;
	letter-spacing: 0.14em;
	font-size: 18px;
	color: var(--odp-ink);
}

.odp-header__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--odp-muted);
}

.odp-header__nav a {
	color: var(--odp-muted);
	text-decoration: none;
}

.odp-header__nav a:hover,
.odp-header__nav a:focus {
	color: var(--odp-brand);
	text-decoration: underline;
}

/* ------------------------------------------------------------ welcome */

.odp-welcome {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	padding: 32px 0 24px;
}

.odp-welcome h1 {
	font-size: 30px;
}

.odp-welcome p {
	margin: 6px 0 0;
	color: var(--odp-muted);
}

.odp-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 1fr));
	gap: 12px;
}

.odp-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px;
	background: var(--odp-bg);
	border: 1px solid var(--odp-line);
	text-align: center;
}

.odp-stat__label {
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--odp-muted);
	font-weight: 600;
}

.odp-stat__sub {
	font-size: 11px;
	color: var(--odp-muted);
}

.odp-stat__value {
	margin-top: 6px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.odp-stat__value--tier {
	color: var(--odp-brand);
}

/* ------------------------------------------------------------- panels */

.odp-panel {
	margin-top: 20px;
	padding: 22px 24px;
	background: var(--odp-panel);
	border: 1px solid var(--odp-line);
}

/* The one highlighted panel. Tinted from the brand red rather than a fixed
   cream, so it still reads as a highlight if the brand colour is changed. */
.odp-panel--accent {
	border-left: 3px solid var(--odp-brand);
	background: #fdf6f4;
}

.odp-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.odp-panel__head h2 {
	font-size: 18px;
}

.odp-panel__meta {
	font-size: 12px;
	color: var(--odp-muted);
}

/* ------------------------------------------------------ progress bar */

.odp-progress {
	background: var(--odp-bg);
}

/* Built to the client's wireframe: a thick pill-shaped track with solid
   circles sitting on it. A tier that has been reached is filled in the brand
   colour, one still ahead is flat grey — the last filled circle is where the
   contractor is, which is how the wireframe reads it. */

/* Measured off the client's wireframe: a 12px pill track with 30px circles
   whose centres sit ON the track's centre line, each circle filled in exactly
   the colour of the segment it stands on. */

.odp-track {
	position: relative;
	height: 12px;
	margin: 36px 28px 74px;
}

.odp-track__line,
.odp-track__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 12px;
	border-radius: 999px;
}

.odp-track__line {
	width: 100%;
	background: var(--odp-track);
}

.odp-track__fill {
	background: var(--odp-brand);
	transition: width 0.4s ease;
	max-width: 100%;
}

/* top:50% puts the node's top edge on the track's centre line. The dot is
   then pulled up by half its own height so the LINE RUNS THROUGH ITS MIDDLE,
   and the labels fall below it.

   Do not centre this with translateY(-50%): the node box is the dot plus two
   lines of label, so that shifts the whole stack and leaves the dot floating
   clear above the track. */
.odp-node {
	position: absolute;
	top: 50%;
	transform: translateX(-50%);
	text-align: center;
	width: 120px;
}

.odp-node__dot {
	display: block;
	width: 30px;
	height: 30px;
	margin: -15px auto 0;
	border-radius: 50%;
	border: 0;
	background: var(--odp-track);
}

.odp-node.is-reached .odp-node__dot {
	background: var(--odp-brand);
}

.odp-node__name,
.odp-node__amount {
	display: block;
	font-size: 13px;
}

.odp-node__name {
	margin-top: 10px;
	font-weight: 700;
}

.odp-node.is-current .odp-node__name {
	color: var(--odp-brand);
}

.odp-node__amount {
	color: var(--odp-muted);
}

.odp-progress__caption {
	margin: 0;
	font-size: 14px;
}

/* ------------------------------------------------------------- points */

.odp-points {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.odp-points__item {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: var(--odp-bg);
	border: 1px solid var(--odp-line);
}

.odp-points__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--odp-muted);
	font-weight: 600;
}

.odp-points__value {
	font-size: 22px;
	font-weight: 700;
}

.odp-points__note {
	font-size: 11px;
	color: var(--odp-muted);
}

/* --------------------------------------------------------- incentives */

.odp-incentives {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.odp-incentive {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 16px;
	background: #ffffff;
	border: 1px solid var(--odp-line);
}

.odp-incentive__amount {
	font-size: 22px;
	font-weight: 700;
	color: var(--odp-accent);
}

.odp-incentive__label {
	font-size: 13px;
}

.odp-incentive__status {
	margin-top: 4px;
	align-self: flex-start;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--odp-bg);
	border: 1px solid var(--odp-line);
	color: var(--odp-muted);
}

.odp-incentive__status.is-done {
	background: #e7f3e7;
	border-color: #bcd9bc;
	color: #2c6b2c;
}

/* -------------------------------------------------------------- cards */

.odp-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 20px;
}

.odp-card {
	padding: 20px 22px;
	background: var(--odp-panel);
	border: 1px solid var(--odp-line);
}

.odp-card h2 {
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--odp-muted);
	margin-bottom: 10px;
}

.odp-card p {
	margin: 0;
	font-size: 14px;
}

/* -------------------------------------------------------------- table */

.odp-table-wrap {
	overflow-x: auto;
}

.odp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.odp-table th,
.odp-table td {
	padding: 11px 14px;
	border: 1px solid var(--odp-line);
	text-align: center;
}

.odp-table thead th {
	background: var(--odp-brand);
	color: #ffffff;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.odp-table thead th:first-child,
.odp-table tbody th {
	text-align: left;
}

.odp-table tbody th {
	font-weight: 500;
	background: #fafafa;
}

.odp-table tbody tr:nth-child(even) td {
	background: #fbfbfb;
}

.odp-table .is-current {
	background: rgba(222, 32, 0, 0.06) !important;
	font-weight: 700;
}

.odp-table thead th.is-current {
	background: var(--odp-accent) !important;
	color: #ffffff;
}

/* ------------------------------------------------------ notice/footer */

.odp-notice {
	margin: 48px auto;
	max-width: 560px;
	padding: 32px;
	text-align: center;
	background: var(--odp-bg);
	border: 1px solid var(--odp-line);
}

.odp-notice h2 {
	font-size: 20px;
	margin-bottom: 8px;
}

.odp-button {
	display: inline-block;
	margin-top: 8px;
	padding: 12px 24px;
	background: var(--odp-brand);
	color: #ffffff !important;
	border-radius: var(--odp-radius);
	text-decoration: none;
	font-family: var(--odp-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
}

.odp-button:hover,
.odp-button:focus {
	filter: brightness(0.9);
	color: #ffffff !important;
}

.odp-footer {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid var(--odp-line);
	font-size: 12px;
	color: var(--odp-muted);
}

.odp-footer p {
	margin: 0;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 900px) {
	.odp-welcome {
		grid-template-columns: 1fr;
	}

	.odp-cards {
		grid-template-columns: 1fr;
	}

	.odp-points {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.odp-header {
		justify-content: center;
		text-align: center;
	}

	.odp-welcome h1 {
		font-size: 24px;
	}

	.odp-stats {
		grid-template-columns: 1fr;
	}

	.odp-incentives {
		grid-template-columns: 1fr;
	}

	/* The progress bar goes vertical rather than crushing five labels. */
	.odp-track {
		height: auto;
		margin: 8px 0 8px 14px;
		padding-left: 22px;
		border-left: 4px solid var(--odp-track);
	}

	.odp-track__line,
	.odp-track__fill {
		display: none;
	}

	.odp-node {
		position: static;
		transform: none;
		width: auto;
		display: grid;
		grid-template-columns: 30px 1fr auto;
		align-items: center;
		gap: 12px;
		padding: 10px 0;
		text-align: left;
	}

	/* Centre the 30px circle on the 4px rail: the first column starts 26px
	   right of the rail's outer edge, and the rail's centre is at 2px. */
	.odp-node__dot {
		margin: 0 0 0 -39px;
	}

	.odp-node__name,
	.odp-node__amount {
		margin-top: 0;
	}

	/* A five-column grid is unusable on a phone, so each row becomes a
	   stacked card with the tier name as the label for each value. */
	.odp-table thead {
		display: none;
	}

	.odp-table,
	.odp-table tbody,
	.odp-table tr,
	.odp-table td,
	.odp-table tbody th {
		display: block;
		width: 100%;
	}

	.odp-table tr {
		margin-bottom: 14px;
		border: 1px solid var(--odp-line);
	}

	.odp-table tbody th {
		font-weight: 700;
		border: 0;
		border-bottom: 1px solid var(--odp-line);
	}

	.odp-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border: 0;
		border-bottom: 1px solid #efefef;
		text-align: right;
	}

	.odp-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: var(--odp-muted);
		text-transform: uppercase;
		font-size: 11px;
		letter-spacing: 0.06em;
	}
}

/* ------------------------------------------- program content blocks */

.odp-intro {
	margin: -4px 0 14px;
	font-size: 14px;
	color: var(--odp-muted);
}

.odp-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 24px;
}

.odp-list li {
	position: relative;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.odp-list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--odp-brand);
}

.odp-panel--accent .odp-list li::before {
	background: var(--odp-accent);
}

/* Current tier row in the tier table */
.odp-table tr.is-current th,
.odp-table tr.is-current td {
	background: rgba(222, 32, 0, 0.06);
	font-weight: 700;
}

@media (max-width: 640px) {
	.odp-list {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   Sign in, set password, my account
   ===================================================================== */

.odp-portal--narrow {
	max-width: 560px;
	padding: 40px 16px 64px;
}

.odp-auth {
	width: 100%;
	background: var(--odp-panel);
	border: 1px solid var(--odp-line);
	border-top: 4px solid var(--odp-brand);
	border-radius: var(--odp-radius);
	padding: 40px 40px 36px;
	box-shadow: 0 4px 20px rgba(16, 24, 40, 0.07);
}

.odp-auth__head {
	text-align: center;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--odp-line);
}

.odp-auth__head img {
	max-height: 64px;
	width: auto;
	display: block;
	margin: 0 auto 12px;
}

.odp-auth__program {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--odp-accent);
}

.odp-auth h1 {
	margin: 0 0 6px;
	font-family: var(--odp-serif);
	font-size: 27px;
	line-height: 1.2;
	color: var(--odp-ink);
	letter-spacing: -0.01em;
}

.odp-auth h1 + .odp-form,
.odp-auth h1 + .odp-note {
	margin-top: 22px;
}

.odp-auth p {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--odp-muted);
}

.odp-auth__alt {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--odp-line);
	text-align: center;
	font-size: 14px;
}

.odp-auth__alt a {
	color: var(--odp-ink);
}

/* ------------------------------------------------------------- forms */

.odp-form label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--odp-ink);
}

.odp-form input[type="text"],
.odp-form input[type="email"],
.odp-form input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	margin-bottom: 18px;
	padding: 13px 14px;
	font-size: 16px;
	line-height: 1.3;
	color: var(--odp-ink);
	background: #fff;
	border: 1px solid var(--odp-line);
	border-radius: var(--odp-radius);
}

.odp-form input:focus {
	outline: none;
	border-color: var(--odp-brand);
	box-shadow: 0 0 0 3px rgba(222, 32, 0, 0.18);
}

/* Password field: input plus the Show control */
.odp-field {
	position: relative;
	margin-bottom: 18px;
}

.odp-field input[type="password"],
.odp-field input[type="text"] {
	margin-bottom: 0;
	padding-right: 64px;
}

.odp-field__toggle {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	padding: 0 12px;
	border: 0;
	border-left: 1px solid var(--odp-line);
	border-radius: 0 var(--odp-radius) var(--odp-radius) 0;
	background: #f6f7f9;
	color: var(--odp-muted);
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}

.odp-field__toggle:hover {
	background: #eceef1;
}

.odp-field__toggle:focus-visible {
	outline: 2px solid var(--odp-brand);
	outline-offset: -2px;
}

/* Inline message under a field */
.odp-field__error {
	margin: 6px 0 16px;
	font-size: 13px;
	line-height: 1.45;
	color: #b42318;
}

.odp-field__error--ok {
	color: #05603a;
}

/* Some themes reset [hidden]. Keep both controls genuinely hidden. */
.odp-field__error[hidden],
.odp-field__toggle[hidden] {
	display: none;
}

/* Set by the server after a failed submit, and by the script while typing */
.odp-form input[aria-invalid="true"] {
	border-color: #b42318;
	background: #fffbfa;
}

.odp-form input[aria-invalid="true"]:focus {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12);
}

.odp-form__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-weight: 500;
	color: var(--odp-muted);
}

.odp-form__check input {
	margin: 0 8px 0 0;
	flex: none;
	width: 16px;
	height: 16px;
}

.odp-form .odp-button {
	width: 100%;
	margin-top: 4px;
	padding: 14px 22px;
	text-align: center;
	border: 0;
	border-radius: var(--odp-radius);
	cursor: pointer;
	font-family: inherit;
	font-size: 16px;
}

/* On the account page the form sits in a panel, not a card. */
.odp-form--inline {
	max-width: 440px;
}

.odp-form--inline .odp-button {
	width: auto;
	min-width: 180px;
}

/* ----------------------------------------------------------- notices */

.odp-note {
	margin: 0 0 16px;
	padding: 11px 13px;
	border-radius: var(--odp-radius);
	border-left: 3px solid var(--odp-line);
	background: #f6f7f9;
	font-size: 13px;
	line-height: 1.5;
	color: var(--odp-ink);
}

.odp-note--error {
	border-left-color: #b42318;
	background: #fef3f2;
	color: #912018;
}

.odp-note--success {
	border-left-color: #067647;
	background: #ecfdf3;
	color: #05603a;
}

/* ------------------------------------------------------ account page */

.odp-welcome--plain {
	display: block;
}

.odp-details {
	margin: 0;
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 10px 20px;
	align-items: baseline;
}

.odp-details dt {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--odp-muted);
}

.odp-details dd {
	margin: 0;
	font-size: 15px;
	color: var(--odp-ink);
}

.odp-details dd code {
	padding: 2px 6px;
	background: #f1f3f5;
	border-radius: var(--odp-radius);
	font-size: 14px;
}

.odp-details__note {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--odp-line);
	font-size: 13px;
	line-height: 1.55;
	color: var(--odp-muted);
}

@media (max-width: 640px) {
	.odp-portal--narrow {
		padding: 24px 16px 48px;
	}

	.odp-auth {
		padding: 28px 22px 24px;
	}

	.odp-auth h1 {
		font-size: 23px;
	}

	.odp-details {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.odp-details dd {
		margin-bottom: 12px;
	}

	.odp-form--inline .odp-button {
		width: 100%;
	}
}