/* Integrative Remission Tracker — trial front-end styles.
   Scoped under .irt-app so it never touches the site's menu bar or theme. */

.irt-app {
	font-family: 'Roboto', sans-serif;
	max-width: 900px; /* was 720px — 25% wider per edit request */
	width: 100%;
	margin: 0 auto;
	color: #2b2b2b;
	line-height: 1.5;
	box-sizing: border-box;
	/* iOS Safari's floating bottom toolbar sits over the last bit of page
	   content unless there's real space below it — this keeps whatever's
	   last on the page (e.g. a "Return to Dashboard" button) clear of it. */
	padding-bottom: max(24px, env(safe-area-inset-bottom));
}

.irt-app, .irt-app * { box-sizing: border-box; }

@media (max-width: 960px) {
	.irt-app { max-width: 100%; padding: 0 12px; }
}
@media (max-width: 600px) {
	.irt-app .irt-row { flex-direction: column; }
	.irt-app .irt-row > div { flex: 1 1 100%; }
}

.irt-app h2, .irt-app h3 {
	font-family: 'Roboto', sans-serif;
	color: #1f4b3f; /* deep green */
}

.irt-app .irt-card {
	border: 1px solid #d8dfdc;
	border-left: 4px solid #2f6f57; /* green accent */
	border-radius: 4px;
	padding: 16px 20px;
	margin-bottom: 18px;
	background: #fff;
}

.irt-app .irt-card.irt-pitta { border-left-color: #2a5f8a; } /* blue */
.irt-app .irt-card.irt-kapha { border-left-color: #7a5230; } /* brown */
.irt-app .irt-card.irt-vata  { border-left-color: #2f6f57; } /* green */

.irt-app label {
	display: block;
	font-weight: 500;
	margin: 10px 0 4px;
}

.irt-app input[type="text"],
.irt-app input[type="number"],
.irt-app input[type="date"],
.irt-app input[type="time"],
.irt-app input[type="password"],
.irt-app select,
.irt-app textarea {
	width: 100%;
	max-width: 400px;
	padding: 8px 10px;
	border: 1px solid #c6cdc9;
	border-radius: 3px;
	font-family: inherit;
	font-size: 16px; /* +2px per edit request — filled-in data was reading too small */
	box-sizing: border-box;
}

.irt-app textarea { max-width: 100%; min-height: 80px; }

.irt-app .irt-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
	margin-bottom: 8px;
}

.irt-app .irt-row > div { flex: 1 1 160px; }

.irt-app button, .irt-app .irt-btn {
	background: #2f6f57;
	color: #fff;
	border: none;
	padding: 9px 18px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	margin-top: 10px;
}

.irt-app button.irt-secondary {
	background: #fff;
	color: #2f6f57;
	border: 1px solid #2f6f57;
}

.irt-app button.irt-danger {
	background: #fff;
	color: #7a5230;
	border: 1px solid #7a5230;
}

/* Visible "the click registered" feedback: every button nudges down and
   dims slightly the instant it's pressed, then springs back on release. */
.irt-app button {
	transition: transform 0.08s ease, box-shadow 0.08s ease, opacity 0.08s ease;
}
.irt-app button:active {
	transform: translateY(2px) scale(0.97);
	box-shadow: none;
	opacity: 0.85;
}
.irt-app button:disabled {
	opacity: 0.65;
	cursor: default;
}

.irt-app table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}
.irt-app table th, .irt-app table td {
	text-align: left;
	padding: 7px 9px;
	border-bottom: 1px solid #e5e9e7;
	font-size: 16px; /* +2px */
}

.irt-app .irt-dosha-description { margin: 8px 0 4px; }
.irt-app .irt-dosha-description ul,
.irt-app .irt-dosha-description ol { margin: 6px 0 6px 22px; }
.irt-app .irt-dosha-description p { margin: 0 0 8px; }

.irt-app .irt-note {
	font-size: 13px;
	color: #5b655f;
}

.irt-app .irt-msg {
	padding: 8px 12px;
	border-radius: 3px;
	margin: 10px 0;
	font-size: 14px;
}
.irt-app .irt-msg.irt-ok { background: #e7f3ee; color: #1f4b3f; }
.irt-app .irt-msg.irt-warn { background: #fbf1e3; color: #7a5230; }
.irt-app .irt-welcome { margin: 0 0 16px; }
.irt-app .irt-welcome p { margin: 6px 0 0; }
.irt-app .irt-msg.irt-err { background: #fbeaea; color: #8a3b3b; }

.irt-app .irt-tag {
	display: inline-block;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 10px;
	background: #eef3f1;
	color: #2f6f57;
	margin-right: 4px;
}

.irt-app .irt-ai-turn { margin-bottom: 14px; }
.irt-app .irt-ai-q { font-weight: 500; }
.irt-app .irt-ai-a { margin-top: 4px; white-space: pre-wrap; }

.irt-login-gate { max-width: 720px; margin: 0 auto; font-family: 'Roboto', sans-serif; }

/* ---------------- Ingredient category-tile picker ---------------- */
.irt-app .irt-ingredient-picker { margin-bottom: 8px; }
.irt-app .irt-ingredient-picker-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.irt-app .irt-ingredient-picker-selected {
	display: inline-block;
	font-weight: 500;
	color: #1f4b3f;
}
.irt-app button.irt-ingredient-picker-change {
	margin-top: 0;
	padding: 4px 12px;
	font-size: 13px;
}
.irt-app .irt-ingredient-groups {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 6px;
}
.irt-app button.irt-ingredient-group-btn {
	margin-top: 0;
	padding: 7px 14px;
	font-size: 14px;
}
.irt-app button.irt-ingredient-group-btn.irt-active {
	background: #2f6f57;
	color: #fff;
	border-color: #2f6f57;
}
.irt-app .irt-ingredient-panel {
	border: 1px solid #d8dfdc;
	border-radius: 3px;
	background: #fff;
	padding: 8px;
	margin-bottom: 8px;
}
.irt-app .irt-ingredient-panel input[type="text"] { max-width: none; width: 100%; margin-bottom: 6px; }
.irt-app .irt-ingredient-panel-list { max-height: 280px; overflow-y: auto; }
.irt-app .irt-combobox-option {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 7px 10px;
	cursor: pointer;
	font-size: 15px;
	border-radius: 3px;
}
.irt-app .irt-combobox-option:hover,
.irt-app .irt-combobox-option:focus { background: #eef3f1; outline: none; }
.irt-app .irt-combobox-option-label { flex: 1 1 auto; }
.irt-app .irt-combobox-option-value {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: #5b655f;
	min-width: 64px;
}
.irt-app .irt-combobox-empty { padding: 8px 10px; color: #5b655f; font-size: 14px; }

/* ---------------- Meal builder rows & running totals ---------------- */
.irt-app .irt-meal-row-block {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #e5e9e7;
}
.irt-app .irt-meal-row-sub { align-items: center; margin-bottom: 0; }
.irt-app .irt-meal-amount { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; }
.irt-app .irt-meal-amount input { max-width: 100px; }
.irt-app .irt-meal-amount .irt-meal-unit-label { font-size: 13px; color: #5b655f; white-space: nowrap; }
.irt-app .irt-meal-row-totals { flex: 1 1 260px; font-variant-numeric: tabular-nums; }

.irt-app .irt-meal-totals {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 14px 0 6px;
	padding: 10px 14px;
	background: #f5f7f6;
	border-radius: 3px;
}
.irt-app .irt-meal-totals-cell {
	display: flex;
	flex-direction: column;
	min-width: 90px;
}
.irt-app .irt-meal-totals-cell .irt-meal-totals-label { font-size: 12px; color: #5b655f; }
.irt-app .irt-meal-totals-cell strong {
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: #1f4b3f;
}

.irt-app .irt-today-carbs {
	margin: 6px 0 4px;
	padding: 8px 14px;
	border-radius: 3px;
	background: #eef3f1;
	color: #1f4b3f;
	font-size: 15px;
}
.irt-app .irt-today-carbs strong { font-variant-numeric: tabular-nums; }
.irt-app .irt-today-carbs.irt-over-limit { background: #fbeaea; color: #9b1c1c; }
.irt-app .irt-today-carbs.irt-over-limit strong { color: #9b1c1c; }

/* ---------------- Monthly graph legend ---------------- */
.irt-app .irt-chart-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-left: auto;
}
.irt-app .irt-chart-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
}
.irt-app .irt-chart-legend-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

/* ---------------- Recipe builder: committed ingredient list ---------------- */
.irt-app .irt-recipe-items-list { margin-bottom: 4px; }
.irt-app .irt-recipe-items-total {
	font-weight: 600;
	color: #1f4b3f;
	margin: 4px 0 16px;
}
.irt-app .irt-recipe-staging {
	border: 1px dashed #c6cdc9;
	border-radius: 4px;
	padding: 14px;
	margin-bottom: 16px;
}

/* ---------------- Voice input (mic buttons + speak-a-recipe transcript) ---------------- */
.irt-app .irt-mic-btn {
	white-space: nowrap;
	flex: 0 0 auto;
}
.irt-app .irt-mic-btn.irt-mic-active {
	background: #7a5230;
	color: #fff;
	border-color: #7a5230;
}
.irt-app .irt-speak-transcript {
	width: 100%;
	min-height: 44px;
	margin-bottom: 8px;
}

/* ---------------- Recipe lists (My recipes / Favourites / Shared database) ---------------- */
.irt-app .irt-recipe-list-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #eee;
}
/* Belt-and-braces spacing: some themes reset flex "gap" or button/link
   margins to 0, so every direct child also gets its own right-margin —
   harmless alongside the flex gap, but keeps the row readable even if
   the theme's CSS wins the specificity fight against gap alone. */
.irt-app .irt-recipe-list-row > * {
	margin-right: 12px !important;
}
.irt-app .irt-recipe-list-row > *:last-child {
	margin-right: 0 !important;
}
.irt-app .irt-recipe-print-link {
	display: inline-block;
	text-decoration: none;
	padding: 4px 10px;
	font-size: 13px;
}

@media print {
	.irt-app .no-print { display: none !important; }
}

/* ---------------- Dashboard quick links ---------------- */
.irt-app .irt-quicklinks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 4px;
}
.irt-app .irt-quicklinks a {
	display: inline-block;
	background: #eef3f1;
	color: #1f4b3f;
	border: 1px solid #d8dfdc;
	border-radius: 20px;
	padding: 7px 16px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 500;
}
.irt-app .irt-quicklinks a:hover { background: #dfece5; }

/* ---------------- Dashboard "How To Use This App" video grid ---------------- */
.irt-app .irt-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
	margin-top: 8px;
}
/* Standalone video pages: bigger boxes, 3 across (2 on tablets, 1 on
   phones). Text size inside the boxes is unchanged. */
#irt-view-videos .irt-video-grid,
#irt-view-ir-videos .irt-video-grid,
#irt-view-app-videos .irt-video-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
@media (max-width: 780px) {
	#irt-view-videos .irt-video-grid,
	#irt-view-ir-videos .irt-video-grid,
	#irt-view-app-videos .irt-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	#irt-view-videos .irt-video-grid,
	#irt-view-ir-videos .irt-video-grid,
	#irt-view-app-videos .irt-video-grid { grid-template-columns: 1fr; }
}

/* ---------------- Video pages: "Show Intro" tick button + intro text ---------------- */
.irt-app .irt-intro { margin: 4px 0 22px; }
.irt-app .irt-intro-toggle {
	display: inline-flex; align-items: center; gap: 10px;
	background: #fff; color: #1f6b4f; border: 2px solid #1f6b4f; border-radius: 6px;
	padding: 9px 16px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1; cursor: pointer;
}
.irt-app .irt-intro-toggle:hover { background: #f1f7f4; }
.irt-app .irt-intro-box {
	width: 18px; height: 18px; border: 2px solid #1f6b4f; border-radius: 3px;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 13px; line-height: 1; color: #fff; box-sizing: border-box;
}
.irt-app .irt-intro-toggle[aria-pressed="true"] .irt-intro-box { background: #1f6b4f; }
.irt-app .irt-intro-toggle[aria-pressed="true"] .irt-intro-box::after { content: '\2713'; }
.irt-app .irt-intro-panel { margin-top: 18px; color: #2b3a33; }
.irt-app .irt-intro-panel[hidden] { display: none; }
.irt-app .irt-intro-panel p, .irt-app .irt-intro-panel li { font-size: 16px; line-height: 1.6; }
.irt-app .irt-intro-panel p { margin: 0 0 14px; }
.irt-app .irt-intro-panel h3 {
	font-family: 'Gelasio', Georgia, serif; font-weight: 600; font-size: 24px;
	color: #1f4b3f; text-align: center; margin: 0 0 18px; background: none;
}
.irt-app .irt-intro-panel h4 {
	font-family: 'Gelasio', Georgia, serif; font-weight: 600; font-size: 19px;
	color: #1f4b3f; margin: 0 0 6px;
}
.irt-app .irt-intro-panel blockquote {
	margin: 0 0 16px; padding: 0; border: 0;
	background: none; font-style: normal; font-size: 17px; line-height: 1.55; color: #2b3a33; quotes: none;
}
.irt-app .irt-intro-panel blockquote::before, .irt-app .irt-intro-panel blockquote::after { content: none; }
.irt-app .irt-intro-panel blockquote p { margin: 0 0 6px; font-size: 17px; }
.irt-app .irt-intro-panel blockquote cite { display: block; font-style: normal; font-size: 14px; color: #55635c; margin-top: 4px; }
.irt-app .irt-intro-panel blockquote cite strong { color: #1f4b3f; font-weight: 500; }
.irt-app .irt-intro-panel .irt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 20px; }
.irt-app .irt-intro-panel .irt-col { padding: 0; }
.irt-app .irt-intro-panel .irt-col p:last-child { margin-bottom: 0; }
.irt-app .irt-intro-panel ol.irt-steps { list-style: none; counter-reset: irtstep; padding: 0; margin: 0 0 20px; }
.irt-app .irt-intro-panel ol.irt-steps li { counter-increment: irtstep; position: relative; padding: 0 0 10px 40px; margin: 0; }
.irt-app .irt-intro-panel ol.irt-steps li::before {
	content: counter(irtstep); position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
	border-radius: 50%; background: #1f6b4f; color: #fff; font-size: 13px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.irt-app .irt-intro-panel ol.irt-steps strong { color: #1f4b3f; font-weight: 500; }
.irt-app .irt-intro-panel a { color: #2a5f8a; }
.irt-app .irt-intro-panel a.irt-cta {
	display: inline-block; margin-top: 4px; background: #1f6b4f; color: #fff;
	text-decoration: none; padding: 11px 20px; border-radius: 6px; font-weight: 500;
}
.irt-app .irt-intro-panel a.irt-cta:hover { background: #18573f; color: #fff; }
@media (max-width: 640px) { .irt-app .irt-intro-panel .irt-cols { grid-template-columns: 1fr; } }
.irt-app .irt-video-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 16 / 9;
	border: 1px solid #d8dfdc;
	border-radius: 6px;
	background-color: #1f4b3f;
	background-size: cover;
	background-position: center;
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
.irt-app .irt-video-tile-blank { background-color: #2a5f8a; }
.irt-app .irt-video-tile::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 55%);
}
.irt-app .irt-video-number {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 1;
	background: rgba(255,255,255,.92);
	color: #1f4b3f;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 3px;
}
.irt-app .irt-video-play {
	position: absolute;
	top: 50%; left: 50%;
	width: 46px; height: 46px;
	margin: -23px 0 0 -23px;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.irt-app .irt-video-play::after {
	content: '';
	position: absolute;
	top: 50%; left: 54%;
	width: 0; height: 0;
	margin: -9px 0 0 -6px;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent #1f4b3f;
}
.irt-app .irt-video-tile:hover .irt-video-play { background: #fff; }
.irt-app .irt-video-title {
	position: relative;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-align: left;
	padding: 6px 8px;
	line-height: 1.3;
}

/* Full-screen player overlay — lives outside .irt-app (appended to
   document.body) so it sits above the theme's own header/menu too.
   max-height uses dvh (dynamic viewport height), not vh: on iOS Safari,
   100vh is taller than what's actually visible once the address bar is
   showing, which was cutting the bottom of the video off-screen — dvh
   tracks the real visible area instead. */
.irt-video-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.9);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}
.irt-video-modal-inner {
	position: relative;
	width: 100%;
	max-width: 960px;
	max-height: 92dvh;
	max-height: 92vh; /* fallback for browsers without dvh support */
	display: flex;
	flex-direction: column;
	overflow-y: auto; /* belt-and-braces: if content is ever taller than the
		available height, this scrolls instead of the video getting clipped
		or the layout jumping — the video itself no longer depends on a
		dynamic-viewport unit that has to recompute mid-rotation. */
}
/* External (YouTube/Vimeo/other iframe) videos: unchanged fixed 16:9 box —
   only self-hosted files get the custom control bar below. */
.irt-video-modal-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.irt-video-modal-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* Self-hosted file videos: video sits above a separate control bar rather
   than the browser drawing controls on top of the video's own picture —
   spec: the native controls were overlapping the captions baked into the
   bottom of the frame ("a slight grey area that covers the words a bit").
   A control bar that is its own element underneath has nothing left to
   cover. */
.irt-video-modal-media-file {
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.irt-video-modal-media-file video {
	width: 100%;
	height: auto; /* natural aspect ratio; the scrollable inner container
		above (not a dvh cap on the video itself) handles any overflow, so
		nothing here has to recompute mid-rotation */
	display: block;
	background: #000;
}
.irt-video-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #17251f;
	padding: 8px 10px;
	flex-shrink: 0;
}
.irt-video-controls button {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	margin: 0;
}
.irt-video-controls input[type="range"] {
	flex: 1;
	accent-color: #2f6f57;
}
.irt-video-controls .irt-video-ctrl-time {
	color: #fff;
	font-size: 12px;
	white-space: nowrap;
	padding: 0 2px;
}
.irt-video-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: #fff;
	color: #1f4b3f;
	border: none;
	border-radius: 3px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.irt-video-modal-inner { max-width: 100%; }
	.irt-video-modal-close { top: 8px; right: 8px; z-index: 1; }
}

/* ---------------- Boxed, date-on-the-left list rows ---------------- */
/* Used by the Data Monitor and can be reused anywhere a "dated list" is
   asked for. Each entry is its own bordered box; the date sits in a fixed
   left-hand column so a long scan-down list stays aligned. */
.irt-app .irt-list-box {
	border: 1px solid #d8dfdc;
	border-radius: 4px;
	overflow: hidden;
}
.irt-app .irt-list-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid #e5e9e7;
}
.irt-app .irt-list-row:last-child { border-bottom: none; }
.irt-app .irt-list-row:nth-child(even) { background: #fafbfa; }
.irt-app .irt-list-date {
	flex: 0 0 110px;
	font-weight: 600;
	color: #1f4b3f;
}
.irt-app .irt-list-time { flex: 0 0 70px; color: #5b655f; font-size: 14px; }
.irt-app .irt-list-body { flex: 1 1 auto; }
.irt-app .irt-list-actions { flex: 0 0 auto; }
.irt-app .irt-list-scroll {
	max-height: 480px;
	overflow-y: auto;
}
.irt-app .irt-search-bar {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
	align-items: center;
}
.irt-app .irt-search-bar input[type="text"] { max-width: none; margin: 0; }

/* ---------------- Calendar (month view) ---------------- */
.irt-app .irt-calendar { margin: 10px 0 18px; }
.irt-app .irt-calendar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.irt-app .irt-calendar-head h4 { margin: 0; color: #1f4b3f; }
.irt-app .irt-calendar-nav button {
	margin: 0 0 0 4px;
	padding: 5px 12px;
}
.irt-app .irt-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.irt-app .irt-calendar-dow {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #5b655f;
	padding-bottom: 2px;
}
.irt-app .irt-calendar-day {
	min-height: 56px;
	border: 1px solid #e5e9e7;
	border-radius: 3px;
	padding: 4px 5px;
	cursor: pointer;
	background: #fff;
	text-align: left;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.irt-app .irt-calendar-day:hover { border-color: #2f6f57; }
.irt-app .irt-calendar-day.irt-cal-empty { border: none; cursor: default; background: transparent; }
.irt-app .irt-calendar-day.irt-cal-today { border-color: #2a5f8a; border-width: 2px; }
.irt-app .irt-calendar-day.irt-cal-selected { background: #eef3f1; border-color: #2f6f57; }
.irt-app .irt-calendar-daynum { font-size: 13px; font-weight: 600; color: #4a5b54; }
.irt-app .irt-calendar-mark {
	font-size: 10px;
	line-height: 1.3;
	color: #2f6f57;
}
.irt-app .irt-calendar-mark.irt-cal-zero { color: #9aa39d; }
/* Data Monitor's "row" mark layout: one metric per column, so a whole
   month's readings line up and a trend is visible at a glance instead of
   being buried in stacked lines. */
.irt-app .irt-calendar-day { min-height: 64px; }
.irt-app .irt-calendar-marks-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 6px;
}
.irt-app .irt-calendar-marks-row .irt-calendar-mark {
	flex: 1 1 auto;
	min-width: 28px;
	white-space: nowrap;
}

/* Data Monitor's "nodes" mark layout: one small block per tracked metric,
   each with a title and up to three time-stamped readings (see
   buildMetricCalBlock in irt-frontend.js). Needs a taller, wider day cell
   than the plain-text mark layouts above. */
.irt-app .irt-calendar-grid.irt-cal-grid-metrics { gap: 5px; }
.irt-app .irt-calendar-day.irt-cal-day-metrics {
	min-height: 96px;
	padding: 5px 4px;
	align-items: stretch;
}
.irt-cal-metric-block { margin-top: 3px; }
.irt-cal-metric-block:first-of-type { margin-top: 4px; }
.irt-cal-metric-title {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: #1f4e6b;
}
.irt-cal-metric-block[data-metric="glucose"] .irt-cal-metric-title,
.irt-cal-metric-block[data-metric="tg"] .irt-cal-metric-title { color: #1f6b4f; }
.irt-cal-metric-block[data-metric="ketones"] .irt-cal-metric-title,
.irt-cal-metric-block[data-metric="hdl"] .irt-cal-metric-title { color: #1f4e6b; }
.irt-cal-metric-block[data-metric="bp"] .irt-cal-metric-title,
.irt-cal-metric-block[data-metric="weight"] .irt-cal-metric-title,
.irt-cal-metric-block[data-metric="homair"] .irt-cal-metric-title { color: #6b4f2f; }
.irt-cal-metric-block[data-metric="tghdl"] .irt-cal-metric-title { color: #1f7a7a; }
/* HOMA-IR / TG-HDL readings above the insulin-resistance threshold. Dark
   amber-brown rather than red, per the site palette rules. */
.irt-cal-metric-slot.irt-ir-above .irt-cal-metric-value,
.irt-ir-status.irt-ir-above { color: #8a4b00; font-weight: 700; }
.irt-ir-status { margin: 6px 0 4px; font-weight: 600; }
.irt-ir-calc { margin: 8px 0 10px; padding: 10px 12px; border-left: 3px solid #2f6f57; background: #f6f9f7; }
/* Three slots side by side on a normal-width screen — each slot pairs its
   own time (above) with its own value (below), rather than a shared row of
   times over a shared row of values, so the mobile override below can
   restack the same markup vertically without needing different HTML. */
.irt-cal-metric-slots {
	display: flex;
	gap: 3px;
}
.irt-cal-metric-slot {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}
.irt-cal-metric-time,
.irt-cal-metric-value {
	display: block;
	font-size: 9px;
	line-height: 1.2;
	white-space: nowrap;
}
.irt-cal-metric-time { color: #5b655f; }
.irt-cal-metric-value { color: #26312c; font-weight: 600; }

/* ---------------- Data Monitor metric toggles ---------------- */
.irt-app .irt-metric-toggle-list label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 18px;
	font-weight: normal;
}
.irt-app .irt-metric-toggle-list input[type="checkbox"] { width: auto; }
.irt-app .irt-add-reading-comment { margin-bottom: 0; }

/* Medications: primary action sits left, under its field, not trailing. */
.irt-app .irt-btn-left { display: block; margin-left: 0; }

/* ---------------- Ask AI — chat-style layout ---------------- */
.irt-app .irt-ai-layout {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.irt-app .irt-ai-history-rail {
	flex: 0 0 220px;
	border: 1px solid #d8dfdc;
	border-radius: 4px;
	background: #fafbfa;
	max-height: 520px;
	overflow-y: auto;
}
.irt-app .irt-ai-history-rail h4 {
	margin: 0;
	padding: 10px 12px;
	font-size: 13px;
	color: #5b655f;
	border-bottom: 1px solid #e5e9e7;
	background: #f2f5f3;
}
.irt-app .irt-ai-history-item {
	padding: 9px 12px;
	font-size: 13px;
	border-bottom: 1px solid #e5e9e7;
	cursor: pointer;
	color: #2b2b2b;
}
.irt-app .irt-ai-history-item:hover { background: #eef3f1; }
.irt-app .irt-ai-main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	border: 1px solid #d8dfdc;
	border-radius: 4px;
	overflow: hidden;
	min-height: 420px;
}
.irt-app .irt-ai-thread {
	flex: 1 1 auto;
	padding: 16px;
	overflow-y: auto;
	max-height: 460px;
}
.irt-app .irt-ai-bubble {
	max-width: 85%;
	padding: 10px 14px;
	border-radius: 10px;
	margin-bottom: 12px;
	white-space: pre-wrap;
	line-height: 1.5;
}
.irt-app .irt-ai-bubble.irt-ai-user {
	background: #2f6f57;
	color: #fff;
	margin-left: auto;
	border-bottom-right-radius: 2px;
}
.irt-app .irt-ai-bubble.irt-ai-assistant {
	background: #f2f5f3;
	color: #2b2b2b;
	margin-right: auto;
	border-bottom-left-radius: 2px;
}
.irt-app .irt-ai-bubble p { margin: 0 0 10px; }
.irt-app .irt-ai-bubble p:last-child { margin-bottom: 0; }
.irt-app .irt-ai-bubble h4, .irt-app .irt-ai-bubble h5 { margin: 12px 0 6px; color: inherit; }
.irt-app .irt-ai-bubble h4:first-child, .irt-app .irt-ai-bubble h5:first-child { margin-top: 0; }
.irt-app .irt-ai-bubble ul { margin: 0 0 10px 20px; padding: 0; }
.irt-app .irt-ai-bubble.irt-ai-user p { margin: 0; }
.irt-app .irt-ai-composer {
	border-top: 1px solid #d8dfdc;
	padding: 10px 12px;
	display: flex;
	gap: 8px;
	align-items: flex-end;
	background: #fff;
}
.irt-app .irt-ai-composer textarea {
	flex: 1 1 auto;
	max-width: none;
	min-height: 44px;
	margin: 0;
}
.irt-app .irt-ai-composer button { margin: 0; }
@media (max-width: 700px) {
	.irt-app .irt-ai-layout { flex-direction: column; }
	.irt-app .irt-ai-history-rail { flex: 1 1 auto; width: 100%; max-height: 160px; }
}

/* ---------------- Phone text size (~25% bigger than desktop) ----------------
   Everything except headings (h2/h3, already large and unaffected) was
   reading too small on a phone — placed last so it wins the cascade over
   every rule above at the same selector specificity, without having to
   touch the desktop sizes those rules set.
   NOTE: this used to bump everything ~75% bigger (28px base and up). On a
   real phone that meant a plain sentence like "3 readings — most recent
   2026-09-24 06:25: 4.30 mmol/L" had nowhere to fit at that size and wrapped
   word-by-word down the whole screen. Scaled back to a size that's still
   noticeably bigger than desktop but actually fits a phone's width. */
@media (max-width: 600px) {
	.irt-app {
		font-size: 20px; /* base text (plain <p>/<li>/chat text with no size of its own) */
		line-height: 1.45;
	}
	.irt-app label { font-size: 20px; }
	.irt-app input[type="text"],
	.irt-app input[type="number"],
	.irt-app input[type="date"],
	.irt-app input[type="time"],
	.irt-app input[type="password"],
	.irt-app select,
	.irt-app textarea { font-size: 20px; }
	.irt-app button, .irt-app .irt-btn { font-size: 18px; }
	.irt-app table th, .irt-app table td { font-size: 18px; }
	.irt-app .irt-note { font-size: 16px; }
	.irt-app .irt-msg { font-size: 18px; }
	.irt-app .irt-tag { font-size: 15px; }
	.irt-app button.irt-ingredient-picker-change { font-size: 16px; }
	.irt-app button.irt-ingredient-group-btn { font-size: 18px; }
	.irt-app .irt-combobox-option { font-size: 19px; }
	.irt-app .irt-combobox-empty { font-size: 18px; }
	.irt-app .irt-meal-amount .irt-meal-unit-label { font-size: 16px; }
	.irt-app .irt-meal-totals-cell .irt-meal-totals-label { font-size: 15px; }
	.irt-app .irt-meal-totals-cell strong { font-size: 23px; }
	.irt-app .irt-today-carbs { font-size: 19px; }
	.irt-app .irt-chart-legend-item { font-size: 16px; }
	.irt-app .irt-recipe-print-link { font-size: 16px; }
	.irt-app .irt-quicklinks a { font-size: 19px; }
	.irt-app .irt-video-number { font-size: 15px; }
	.irt-app .irt-video-title { font-size: 16px; }
	.irt-app .irt-list-time { font-size: 18px; }
	.irt-app .irt-calendar-dow { font-size: 15px; }
	.irt-app .irt-calendar-daynum { font-size: 16px; }
	.irt-app .irt-calendar-mark { font-size: 13px; }
	.irt-app .irt-calendar-day { min-height: 92px; }
	/* Data Monitor's per-metric mini-tables: a 7-column month grid leaves so
	   little width per day on a phone that three time/value slots side by
	   side would force something like "10.55am" or "123/65" onto a sliver a
	   few characters wide. Stacking the (up to three) slots vertically
	   instead gives each one the day cell's full width, at the cost of a
	   taller cell on days with several readings. */
	.irt-app .irt-cal-metric-title { font-size: 11px; }
	.irt-app .irt-cal-metric-slots { flex-direction: column; gap: 0; }
	.irt-app .irt-cal-metric-slot { display: flex; align-items: baseline; gap: 4px; text-align: left; }
	.irt-app .irt-cal-metric-slot.irt-cal-slot-empty { display: none; }
	.irt-app .irt-cal-metric-time { font-size: 10px; min-width: 46px; }
	.irt-app .irt-cal-metric-value { font-size: 11px; }
	.irt-app .irt-calendar-day.irt-cal-day-metrics { min-height: 90px; }
	.irt-app .irt-ai-history-rail h4 { font-size: 16px; }
	.irt-app .irt-ai-history-item { font-size: 16px; }

	/* The video player's own control bar (Close, play/pause, seek time,
	   mute, fullscreen) is deliberately left out of this mobile bump —
	   enlarging it made the controls harder to use, not easier, so it
	   stays at its normal desktop size on phones too. */
}

/* Meals page: "My meals" button beside the Meal name field. */
.irt-app .irt-mealname-row { display: flex; gap: 10px; align-items: center; }
.irt-app .irt-mealname-row input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.irt-app .irt-mealname-row .irt-mymeals-top { flex: 0 0 auto; margin: 0; white-space: nowrap; }

/* ---------------- 0.22.0: edit-in-place banner + Deleted bin ---------------- */
.irt-app .irt-edit-banner {
	border-left: 4px solid #2f6f57;
	background: #f3f8f5;
	padding: 10px 14px;
	margin-bottom: 14px;
	font-weight: 500;
}
.irt-app .irt-bin h4 {
	margin: 14px 0 8px 0;
	color: #2f6f57;
}

/* Calendar day cells are <button>s, so they inherited the white button
   text colour and the day numbers were invisible on the white cell. */
.irt-app .irt-calendar-day { color: #2b2b2b; }
.irt-app .irt-calendar-day .irt-calendar-daynum { color: #23473a; }
.irt-app .irt-calendar-day.irt-cal-today .irt-calendar-daynum { color: #2f6f57; text-decoration: underline; }

/* Net carbs over the daily limit (Meals Month view). Dark red is a
   deliberate exception to the no-red house style: it's a warning. */
.irt-app .irt-calendar-mark.irt-cal-over { color: #9b1c1c; font-weight: 700; }
/* "Enter your broth nutritional values" panel (Recipes + Meals pages). */
.irt-app .irt-broth-manager {
	border: 1px dashed #c6cdc9;
	border-radius: 4px;
	padding: 10px 14px;
	margin: 14px 0 16px;
}
.irt-app .irt-broth-manager > summary {
	cursor: pointer;
	font-weight: 600;
	color: #2f6f57;
}
.irt-app .irt-broth-manager[open] > summary {
	margin-bottom: 10px;
}
.irt-app .irt-broth-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}
@media (max-width: 640px) {
	.irt-app .irt-broth-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.irt-app .irt-broth-list {
	margin-top: 12px;
}

/* 0.35.1 — clear meal buttons, meals logged list, saved-meal highlight */
.irt-app .irt-meal-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.irt-app .irt-meal-buttons button { margin: 0; }
.irt-app .irt-meal-buttons-hint { margin-top: 6px; }
.irt-app .irt-meals-logged p { margin: 4px 0; }
.irt-app .irt-meals-logged-total { font-weight: 600; border-top: 1px solid #d9e2ec; padding-top: 6px; }
.irt-app .irt-meals-logged-total.irt-over-limit { color: #9b1c1c; }
.irt-app .irt-fav-highlight { background: #e8f4ea; outline: 2px solid #2e7d4f; border-radius: 6px; transition: background 1s; }
.irt-app .irt-title-row .irt-from-existing { white-space: nowrap; }
.irt-app .irt-existing-panel { border: 1px solid #d9e2ec; border-radius: 6px; padding: 8px; margin: 6px 0 12px; background: #fff; }
.irt-app .irt-existing-panel select { width: 100%; }

/* 0.36.0 — date + time, calendar entries with delete, broth mix */
.irt-app .irt-datetime-row { display: flex; gap: 10px; flex-wrap: wrap; }
.irt-app .irt-datetime-row input { flex: 0 1 220px; margin-bottom: 0; }
.irt-app .irt-logged-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid #eef2f5; }
.irt-app .irt-logged-time { flex: 0 0 52px; font-weight: 600; color: #1f5f8b; font-variant-numeric: tabular-nums; }
.irt-app .irt-logged-text { flex: 1 1 auto; min-width: 0; }
.irt-app .irt-logged-delete { flex: 0 0 auto; margin: 0; }
.irt-app .irt-cal-day-panel { margin-top: 14px; border-top: 1px solid #d9e2ec; padding-top: 10px; }
.irt-app .irt-cal-day-panel h4 { margin: 0 0 6px; }
.irt-app .irt-broth-guide ul { margin: 4px 0 10px 18px; padding: 0; }
.irt-app .irt-broth-guide li { margin: 2px 0; font-size: 0.92em; }
.irt-app .irt-broth-mix-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.irt-app .irt-broth-mix-row select { flex: 1 1 260px; margin: 0; }
.irt-app .irt-broth-mix-row input { flex: 0 0 100px; margin: 0; }
.irt-app .irt-broth-mix-row button { margin: 0; }
.irt-app .irt-broth-mix-summary { font-weight: 600; color: #2e7d4f; }
.irt-app .irt-broth-label-form { margin: 12px 0; }
.irt-app .irt-broth-label-form summary { cursor: pointer; color: #1f5f8b; }
@media (min-width: 641px) { .irt-app .irt-broth-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 600px) { .irt-app .irt-logged-row { flex-wrap: wrap; } }


/* ---------------- Video boxes as links (each opens its own page in a new tab) ---------------- */
.irt-app a.irt-video-tile,
.irt-app a.irt-video-tile:hover,
.irt-app a.irt-video-tile:focus { text-decoration: none; color: #fff; box-sizing: border-box; }

/* ---------------- One video on its own page ---------------- */
.irt-app.irt-video-single-page { max-width: 960px; margin: 0 auto; }
.irt-app .irt-video-back { display: inline-block; text-decoration: none; margin: 4px 0 16px; }
.irt-app .irt-video-single-page .irt-video-back:last-child { margin: 18px 0 0; }
.irt-app .irt-video-single-title {
	font-family: 'Gelasio', Georgia, serif; font-weight: 600; color: #1f4b3f;
	text-align: center; background: none; margin: 0 0 16px;
}
.irt-app .irt-video-single-media { border-radius: 6px; overflow: hidden; }

/* ---------------- "This content is for App Development access" ---------------- */
.irt-app.irt-no-access { max-width: 1060px; margin: 30px auto; text-align: center; }
.irt-app.irt-no-access p {
	display: inline-block; margin: 0; padding: 18px 26px; font-size: 18px; color: #1f4b3f;
	border: 2px solid #1f6b4f; border-radius: 6px; background: #fff;
}