/*
Theme Name: Meal Plan
Description: Minimal private theme for the meal planner. One page, one job.
Version: 0.1.0
Requires PHP: 7.4
*/

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--mp-paper, #f1f3f2);
	color: var(--mp-ink, #1e2a28);
	font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--mp-deep, #26514c); }

.mp-masthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: 62rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem .75rem;
	border-bottom: 1px solid var(--mp-rule, #d5dbd9);
}

.mp-brand {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.mp-nav {
	display: flex;
	gap: 1rem;
	font-size: .88rem;
}

.mp-nav a { color: var(--mp-ink-2, #5c6b68); text-decoration: none; }
.mp-nav a:hover { color: var(--mp-ink, #1e2a28); text-decoration: underline; }

/* -- sign in ------------------------------------------------------------- */

.mp-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 1.5rem;
}

.mp-gate-inner {
	width: 100%;
	max-width: 26rem;
	padding: 2.25rem 2rem;
	text-align: left;
	background: #fff;
	border: 1px solid var(--mp-rule, #d5dbd9);
	border-radius: 3px;
}

.mp-gate h1 {
	margin: 0 0 .4rem;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
}

.mp-gate p {
	margin: 0 0 1.5rem;
	color: var(--mp-ink-2, #5c6b68);
	font-size: .93rem;
	line-height: 1.5;
}

.mp-signin {
	display: inline-block;
	width: 100%;
	padding: .65rem 1rem;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--mp-deep, #26514c);
	border-radius: 3px;
	font-size: .97rem;
}

.mp-signin:hover { background: #1d403c; }
.mp-signin:focus-visible { outline: 2px solid #1e2a28; outline-offset: 2px; }

.mp-gate-alt {
	margin: 1rem 0 0;
	font-size: .82rem;
	color: var(--mp-ink-2, #5c6b68);
}

/* The three cost colours, previewed on the sign-in card. It is the only
   decoration on the page and it means something. */
.mp-tierstrip {
	display: flex;
	gap: 3px;
	margin-bottom: 1.5rem;
}

.mp-tierstrip span { height: 4px; flex: 1; border-radius: 2px; }
.mp-tierstrip span:nth-child(1) { background: #5b7b5a; }
.mp-tierstrip span:nth-child(2) { background: #b07d2b; }
.mp-tierstrip span:nth-child(3) { background: #8c3a3a; }

.mp-foot {
	max-width: 62rem;
	margin: 0 auto;
	padding: 2rem 1.25rem;
	font-size: .8rem;
	color: var(--mp-ink-2, #5c6b68);
}