/* Public Worker-rendered recipes, aligned with the Astro-port Misoify UI. */
@import url("/fonts.css");

:root {
	color-scheme: light;
	--paper: #f7f4ea;
	--paper-2: #efebdc;
	--ink: #1b241b;
	--ink-strong: #0f150f;
	--ink-2: #45503f;
	--miso: #226b45;
	--miso-bright: #3f9b60;
	--miso-dark: #124029;
	--ember: #e85a2a;
	--ember-dark: #b33e16;
	--turmeric: #e8a72c;
	--cream: #ffffff;
	--line: rgba(27, 36, 27, 0.13);
	--line-2: rgba(27, 36, 27, 0.07);
	--sage: #d0e6d7;
	--muted: #77806b;
	--danger: #c0453a;
	--danger-soft: #f6e0db;
	--focus-ring-cta: rgba(232, 90, 42, 0.42);
	--hover-tint: rgba(27, 36, 27, 0.045);
	--scrim: rgba(15, 21, 15, 0.55);
	--radius-lg: 9px;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--shadow: 0 1px 2px rgba(27, 36, 27, 0.05), 0 6px 16px -14px rgba(27, 36, 27, 0.26);
	--shadow-card: 0 1px 2px rgba(27, 36, 27, 0.05), 0 6px 14px -12px rgba(27, 36, 27, 0.28);
	--shadow-menu: 0 14px 30px -20px rgba(27, 36, 27, 0.5);
	--font-head: "Quicksand", ui-sans-serif, system-ui, sans-serif;
	--font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
	--font-mono: "Space Mono", ui-monospace, monospace;
}

/* Explicit override — same mechanism as the signed-in app (foundation.css):
   .dark / [data-theme="dark"] on any ancestor wins regardless of OS setting. */
.dark,
[data-theme="dark"] {
	color-scheme: dark;
	--paper: #171c15;
	--paper-2: #1f251c;
	--ink: #edefe3;
	--ink-strong: #ffffff;
	--ink-2: #c3c8b6;
	--miso-dark: #7fbe96;
	--cream: #212821;
	--line: rgba(255, 255, 255, 0.11);
	--line-2: rgba(255, 255, 255, 0.06);
	--sage: rgba(63, 155, 96, 0.18);
	--muted: #8f9781;
	--danger: #de6558;
	--danger-soft: rgba(192, 69, 58, 0.24);
	--focus-ring-cta: rgba(232, 90, 42, 0.5);
	--hover-tint: rgba(255, 255, 255, 0.06);
	--scrim: rgba(0, 0, 0, 0.6);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -14px rgba(0, 0, 0, 0.5);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 14px -12px rgba(0, 0, 0, 0.5);
	--shadow-menu: 0 14px 30px -20px rgba(0, 0, 0, 0.85);
}

/* Follow the OS when no explicit theme is chosen. An explicit
   .light / [data-theme="light"] anywhere opts out. */
@media (prefers-color-scheme: dark) {
	:root:not(.light):not([data-theme="light"]) {
		color-scheme: dark;
		--paper: #171c15;
		--paper-2: #1f251c;
		--ink: #edefe3;
		--ink-strong: #ffffff;
		--ink-2: #c3c8b6;
		--miso-dark: #7fbe96;
		--cream: #212821;
		--line: rgba(255, 255, 255, 0.11);
		--line-2: rgba(255, 255, 255, 0.06);
		--sage: rgba(63, 155, 96, 0.18);
		--muted: #8f9781;
		--danger: #de6558;
		--danger-soft: rgba(192, 69, 58, 0.24);
		--focus-ring-cta: rgba(232, 90, 42, 0.5);
		--hover-tint: rgba(255, 255, 255, 0.06);
		--scrim: rgba(0, 0, 0, 0.6);
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -14px rgba(0, 0, 0, 0.5);
		--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 14px -12px rgba(0, 0, 0, 0.5);
		--shadow-menu: 0 14px 30px -20px rgba(0, 0, 0, 0.85);
	}
}

* {
	box-sizing: border-box;
}

.mds-ico {
	display: block;
	fill: none;
	flex: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
}

a {
	color: var(--miso-dark);
	font-weight: 700;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.ms {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	min-height: 100vh;
}

.ms .apptop {
	align-items: center;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(16px);
	display: flex;
	gap: 16px;
	min-height: 68px;
	padding: 11px 28px;
}

.ms .mk {
	align-items: center;
	color: var(--ink);
	display: flex;
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 800;
	gap: 9px;
	letter-spacing: -0.03em;
	text-decoration: none;
}

.ms .mk .mark {
	align-items: center;
	background: var(--miso);
	border-radius: 11px;
	color: #fff;
	display: grid;
	height: 34px;
	justify-items: center;
	width: 34px;
}

.ms .apptop nav {
	display: flex;
	gap: 4px;
}

.ms .apptop nav a {
	border-radius: 999px;
	color: var(--muted);
	font: 700 13px var(--font-body);
	padding: 9px 12px;
	text-decoration: none;
}

.ms .apptop nav a:hover,
.ms .apptop nav a[aria-current="page"] {
	background: var(--cream);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	color: var(--miso-dark);
}

.ms .acctmenu {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-left: auto;
}

.ms .acctmenu .nm {
	color: var(--ink);
	font: 600 13.5px var(--font-body);
}

.ms .btn-line {
	align-items: center;
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 9px;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	font: 700 14px var(--font-head);
	gap: 8px;
	justify-content: center;
	padding: 11px 16px;
	text-decoration: none;
}

.ms .btn-line:hover {
	border-color: var(--miso);
}

.ms .public-shell {
	margin: 0 auto;
	max-width: 1240px;
	padding: 26px 34px 48px;
}

.ms .recipe-hero {
	align-items: stretch;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
	margin-bottom: 20px;
}

.ms .recipe-hero-copy,
.ms .recipe-hero-media,
.ms .card2 {
	background: var(--cream);
	border: 1px solid var(--line-2);
	border-radius: 13px;
	box-shadow: var(--shadow);
}

.ms .recipe-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
}

.ms .recipe-hero-media {
	position: relative;
	background: var(--sage);
	min-height: 300px;
	overflow: hidden;
}

.ms .recipe-hero-image {
	display: block;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	width: 100%;
}

/* ---- CoverPlate — the photo-free recipe cover ----
   Photography is a household feature, so most recipes have none; this
   deterministic tinted wash + glyph is their canonical cover, not a stock photo. */
.ms .cover-plate {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--miso-dark);
	background: linear-gradient(
		142deg,
		color-mix(in srgb, var(--miso) 17%, var(--cream)),
		color-mix(in srgb, var(--miso) 5%, var(--cream))
	);
}

.ms .cover-plate.tone-turmeric {
	color: var(--turmeric);
	background: linear-gradient(
		142deg,
		color-mix(in srgb, var(--turmeric) 22%, var(--cream)),
		color-mix(in srgb, var(--turmeric) 6%, var(--cream))
	);
}

.ms .cover-plate.tone-ember {
	color: var(--ember-dark);
	background: linear-gradient(
		142deg,
		color-mix(in srgb, var(--ember) 18%, var(--cream)),
		color-mix(in srgb, var(--ember) 5%, var(--cream))
	);
}

.ms .cover-plate.tone-sage {
	color: var(--miso-dark);
	background: linear-gradient(
		142deg,
		color-mix(in srgb, var(--miso-bright) 26%, var(--cream)),
		color-mix(in srgb, var(--miso-bright) 8%, var(--cream))
	);
}

.ms .cover-plate::before {
	content: "";
	position: absolute;
	width: 46%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1.5px solid currentColor;
	opacity: 0.18;
}

.ms .cover-plate .cp-glyph {
	position: relative;
	opacity: 0.62;
	display: grid;
	place-items: center;
	width: 46%;
	aspect-ratio: 1;
}

.ms .cover-plate .cp-glyph .mds-ico {
	width: 46%;
	height: 46%;
}

.ms .kicker {
	color: var(--muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ms h1 {
	font-family: var(--font-head);
	font-size: clamp(36px, 5vw, 64px);
	letter-spacing: 0;
	line-height: 1.02;
	margin: 10px 0 16px;
}

.ms .recipe-dek {
	max-width: 680px;
	margin: 0 0 18px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.55;
}

.ms .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.ms .rd-pubrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 2px;
}

.ms .rd-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.ms .icon-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--muted);
	cursor: pointer;
	list-style: none;
}

.ms .icon-btn::-webkit-details-marker {
	display: none;
}

.ms .icon-btn:hover {
	border-color: var(--miso);
	color: var(--miso-dark);
}

.ms .rd-overflow {
	position: relative;
}

.ms .rd-overflow-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 20;
	min-width: 210px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--cream);
	box-shadow: var(--shadow);
}

.ms .rd-overflow-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	padding: 9px 10px;
	color: var(--ink);
	font: 700 13px var(--font-body);
	text-align: left;
	cursor: pointer;
}

.ms .rd-overflow-item:hover {
	background: var(--paper);
}

.ms .rd-overflow-item.danger {
	color: var(--ember-dark);
}

.ms .rd-overflow-item.danger:hover {
	background: color-mix(in srgb, var(--ember) 12%, transparent);
}

.ms .rd-overflow-item[hidden] {
	display: none;
}

.ms .rd-overflow-divider {
	height: 1px;
	margin: 4px 6px;
	background: var(--line-2);
}

.ms .rd-overflow-divider[hidden] {
	display: none;
}

.ms .rt-cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}

.ms .rd-servings-stepper {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ms .rd-servings-stepper button {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink);
	display: grid;
	place-items: center;
	cursor: pointer;
	flex: none;
}

.ms .rd-servings-stepper button:hover {
	border-color: var(--miso);
	color: var(--miso-dark);
}

.ms .rd-servings-stepper button:disabled {
	opacity: 0.4;
	cursor: default;
}

.ms .rd-servings-stepper b {
	min-width: 16px;
	text-align: center;
	font-family: var(--font-head);
}

.ms .tag {
	align-items: center;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	display: inline-flex;
	font: 700 11.5px var(--font-body);
	gap: 6px;
	padding: 5px 10px;
	white-space: nowrap;
}

.ms .tag .mds-ico {
	height: 13px;
	width: 13px;
}

.ms .tag.accent {
	background: var(--sage);
	border-color: transparent;
	color: var(--miso-dark);
}

.ms .tag.warm {
	background: rgba(232, 167, 44, 0.16);
	border-color: transparent;
	color: var(--turmeric);
}

.ms .tag .alt {
	color: var(--muted);
	font-weight: 500;
}

.ms .btn-cta {
	align-items: center;
	background: var(--ember);
	border: 1px solid var(--ember);
	border-radius: 9px;
	box-shadow: 0 7px 16px -10px rgba(232, 90, 42, 0.5);
	color: #fff;
	display: inline-flex;
	font: 700 14px var(--font-head);
	gap: 8px;
	justify-content: center;
	margin-top: 20px;
	padding: 11px 16px;
	text-decoration: none;
	width: fit-content;
}

.ms .btn-cta .mds-ico {
	height: 15px;
	width: 15px;
}

.ms .btn-cta:hover {
	background: var(--ember-dark);
	border-color: var(--ember-dark);
}

.ms .acctmenu .btn-cta {
	width: auto;
	margin-top: 0;
}

.ms .recipe-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 0 0 22px;
	border: 1px solid var(--line-2);
	border-radius: 11px;
	background: var(--cream);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.ms .recipe-stats.recipe-stats--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ms .recipe-stats.recipe-stats--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ms .recipe-stats div {
	align-items: center;
	display: flex;
	gap: 11px;
	padding: 15px 16px;
	border-right: 1px solid var(--line-2);
}

.ms .recipe-stats div:last-child {
	border-right: 0;
}

.ms .recipe-stats .st-ico {
	align-items: center;
	background: var(--sage);
	border-radius: 8px;
	color: var(--miso-dark);
	display: grid;
	flex: none;
	height: 38px;
	justify-items: center;
	width: 38px;
}

.ms .recipe-stats .st-ico.warm {
	background: rgba(232, 167, 44, 0.16);
	color: var(--turmeric);
}

.ms .recipe-stats .st-t {
	display: grid;
	gap: 3px;
}

.ms .recipe-stats strong {
	color: var(--ink);
	font: 700 18px / 1.1 var(--font-head);
}

.ms .recipe-stats span {
	color: var(--muted);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ms .recipe-grid {
	align-items: start;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
}

.ms .rt-aside {
	display: grid;
	gap: 18px;
}

.ms .card2 {
	padding: 24px;
}

.ms .card2 + .card2 {
	margin-top: 0;
}

.ms .card2 h2 {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	margin: 4px 0 16px;
}

.ms .rt-mh {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 6px;
}

.ms .rt-mh h2 {
	margin: 4px 0 0;
}

.ms ol,
.ms ul {
	line-height: 1.55;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

/* ---- Method steps ---- */
.ms .step-list {
	margin-top: 4px;
}

.ms .recipe-step {
	align-items: start;
	border-top: 1px solid var(--line-2);
	display: grid;
	gap: 16px;
	grid-template-columns: 34px minmax(0, 1fr);
	padding: 22px 0;
}

.ms .recipe-step:first-child {
	border-top: 0;
	padding-top: 0;
}

.ms .ms-n {
	align-items: center;
	background: var(--cream);
	border: 1.5px solid var(--miso);
	border-radius: 50%;
	color: var(--miso-dark);
	display: grid;
	font: 800 12px var(--font-mono);
	height: 32px;
	justify-items: center;
	width: 32px;
}

.ms .step-head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 7px;
}

.ms .step-head strong {
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 17px;
}

.ms .k-lane {
	border-radius: 999px;
	font: 800 9px var(--font-body);
	letter-spacing: 0.08em;
	padding: 4px 7px;
	text-transform: uppercase;
}

.ms .k-lane.prep {
	background: var(--sage);
	color: var(--miso-dark);
}

.ms .k-lane.cook {
	background: rgba(232, 167, 44, 0.16);
	color: var(--turmeric);
}

.ms .recipe-step p {
	color: var(--ink-2);
	font-size: 15px;
	line-height: 1.65;
	margin: 0;
}

.ms .recipe-step p.step-why {
	margin-top: 6px;
	color: var(--muted);
	font-size: 13.5px;
	font-style: italic;
}

.ms .step-image {
	border: 1px solid var(--line);
	border-radius: 12px;
	display: block;
	height: auto;
	margin-top: 14px;
	max-height: 360px;
	object-fit: cover;
	width: min(100%, 440px);
}

.ms .step-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.ms .step-timer {
	align-items: center;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--miso-dark);
	display: inline-flex;
	font: 700 12.5px var(--font-mono);
	gap: 6px;
	padding: 6px 10px;
}

.ms .step-timer .mds-ico {
	height: 13px;
	width: 13px;
}

.ms .step-parallel {
	color: var(--muted);
	font-size: 12.5px;
	font-weight: 600;
}

.ms .step-uses {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
}

.ms .step-uses li {
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	padding: 4px 9px;
}

.ms .step-uses li[data-kind="ingredient"] {
	background: var(--sage);
	color: var(--miso-dark);
}

.ms .step-uses li[data-kind="equipment"] {
	background: rgba(232, 167, 44, 0.16);
	color: var(--turmeric);
}

.ms .step-uses li span {
	font-weight: 700;
}

.ms .w-tk {
	border-radius: 4px;
	background: var(--sage);
	color: var(--miso-dark);
	font-weight: 700;
	padding: 1px 5px;
}

.ms .w-tk.eq {
	background: rgba(232, 167, 44, 0.16);
	color: var(--turmeric);
}

/* ---- Phase tabs ---- */
.ms .phase-tabs {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 9px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

.ms .phase-tabs button {
	background: transparent;
	border: 0;
	border-radius: 7px;
	color: var(--muted);
	cursor: pointer;
	font: 700 13px var(--font-body);
	padding: 7px 13px;
}

.ms .phase-tabs button:hover {
	color: var(--ink);
}

.ms .phase-tabs button.on {
	background: var(--cream);
	box-shadow: 0 1px 2px rgba(27, 36, 27, 0.08);
	color: var(--miso-dark);
}

.ms .phase-tabs .c {
	font-family: var(--font-mono);
	font-size: 11px;
	opacity: 0.75;
}

/* ---- Ingredient checklist ---- */
.ms .ingredient-checklist li {
	align-items: center;
	border-bottom: 1px solid var(--line-2);
	display: flex;
	gap: 12px;
	padding: 11px 0;
}

.ms .ingredient-checklist li:last-child {
	border-bottom: 0;
}

.ms .checkbox {
	align-items: center;
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	flex: 1;
	font-size: 14px;
	gap: 10px;
	min-width: 0;
}

.ms .checkbox input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.ms .checkbox .box {
	align-items: center;
	background: transparent;
	border: 2px solid var(--miso);
	border-radius: 50%;
	color: #fff;
	display: grid;
	flex: none;
	height: 22px;
	justify-items: center;
	transition: background 0.16s ease;
	width: 22px;
}

.ms .checkbox .box .mds-ico {
	height: 13px;
	opacity: 0;
	stroke-width: 3;
	transform: scale(0.5);
	transition: 0.15s ease;
	width: 13px;
}

.ms .checkbox input:checked + .box {
	background: var(--miso);
}

.ms .checkbox input:checked + .box .mds-ico {
	opacity: 1;
	transform: scale(1);
}

.ms .checkbox input:checked ~ .checkbox-label {
	color: var(--muted);
	text-decoration: line-through;
}

.ms .checkbox-label .d {
	color: var(--muted);
	display: block;
	font-size: 12.5px;
	margin-top: 2px;
}

.ms .ingredient-checklist .a {
	color: var(--ink-2);
	flex: none;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

/* ---- Equipment ---- */
.ms .rt-eq {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ms .empty-note {
	color: var(--muted);
	font-size: 13.5px;
	margin: 0;
}

.ms .footer {
	color: var(--muted);
	display: flex;
	font-size: 13px;
	gap: 16px;
	justify-content: space-between;
	margin-top: 18px;
}

@media (max-width: 900px) {
	.ms .recipe-hero,
	.ms .recipe-grid {
		grid-template-columns: 1fr;
	}

	.ms .public-shell {
		padding: 22px 18px 42px;
	}
}

@media (max-width: 640px) {
	.ms .apptop {
		flex-wrap: wrap;
		gap: 12px;
		padding: 14px 16px;
	}

	.ms .apptop nav {
		order: 3;
		width: 100%;
	}

	.ms .acctmenu {
		margin-left: auto;
	}

	.ms .acctmenu .nm {
		display: none;
	}

	.ms .recipe-hero-copy,
	.ms .card2 {
		padding: 20px;
	}

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

	.ms .recipe-stats div {
		border-right: 0;
		border-bottom: 1px solid var(--line-2);
	}

	.ms .recipe-stats div:last-child {
		border-bottom: 0;
	}
}

/* ---- Button (ported from src/styles/recipe-dashboard/components.css) ----
   Only the variants the public-page confirm dialog needs: ghost (Cancel) and
   danger (the destructive action). Keep in sync with Button.astro / components.css. */
.ms .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--radius-lg);
	font: 700 14px / 1 var(--font-head);
	padding: 11px 16px;
	text-decoration: none;
	white-space: nowrap;
	transition: 0.16s var(--ease);
}
.ms .btn:hover {
	transform: translateY(-1px);
}
.ms .btn:active {
	transform: translateY(1px);
}
.ms .btn:focus-visible {
	outline: 3px solid var(--focus-ring-cta);
	outline-offset: 2px;
}
.ms .btn:disabled {
	opacity: 0.5;
	pointer-events: none;
}
.ms .btn-ghost {
	background: transparent;
	color: var(--muted);
}
.ms .btn-ghost:hover {
	background: var(--hover-tint);
	color: var(--miso-dark);
}
.ms .btn-danger {
	background: var(--danger);
	border-color: var(--danger);
	color: #fff;
}

/* ---- Modal / ConfirmDialog (ported from components.css) ---- */
.ms dialog.modal-card {
	width: min(480px, calc(100% - 32px));
	max-width: none;
	margin: auto;
	border: 0;
	border-radius: 14px;
	background: var(--cream);
	color: var(--ink);
	padding: 26px;
	box-shadow: var(--shadow-menu);
}
.ms dialog.modal-card::backdrop {
	background: var(--scrim);
	backdrop-filter: blur(6px);
}
.ms .modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}
.ms .confirm-dialog {
	text-align: left;
}
.ms .confirm-dialog-ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 12px;
	border-radius: 12px;
	background: var(--danger-soft);
	color: var(--danger);
}
.ms .confirm-dialog h2 {
	margin: 0 0 6px;
	font-family: var(--font-head);
	font-size: 21px;
	color: var(--ink);
}
.ms .confirm-dialog-desc {
	margin: 0;
	color: var(--muted);
	font-size: 13.5px;
	line-height: 1.5;
}