/* Manager SE / ShopKey Help Center — site stylesheet
   Replaces the old inline <style> block that lived in Templates/help.dwt.

   Colors and typography follow the Mitchell 1 Brand Standards (Primary
   Palette + "Manage" product-category palette, since this is the Manager SE
   help site; see Brand Colors / Typography sections):
     - Primary palette: White FFFFFF, M1 Yellow FFC61E, M1 Beige FFF4D2
     - Manage category: E44841 / A10B04 / FE5E57 / FFF0EF
     - Typeface: Geist (Black for headings, Regular for body) */

:root {
	--color-primary: #a10b04;
	--color-accent: #e44841;
	--color-accent-soft: #fff0ef;
	--color-yellow: #ffc61e;
	--color-beige: #fff4d2;
	--color-bg: #ffffff;
	--color-bg-muted: #fff4d2;
	--color-border: #e7dcbb;
	--color-text: #1c1f24;
	--color-text-muted: #6b6355;
	--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--content-max-width: 1200px;
	--sidebar-width: 280px;
}

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

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-text);
	background: var(--color-bg-muted);
	line-height: 1.55;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	max-width: 100%;
	border-collapse: collapse;
}

a {
	color: var(--color-primary);
}

a:hover,
a:focus {
	text-decoration: underline;
}

/* ---------- Header ---------- */

.site-header {
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: .75rem 1rem;
}

.site-header__logo img {
	display: block;
}

.site-header__links {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.1rem;
	font-size: .85rem;
	margin-right: auto;
}

.site-header__links a {
	color: var(--color-text);
	text-decoration: none;
}

.site-header__links a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* ---------- Site search ---------- */

.site-search {
	position: relative;
	flex-shrink: 0;
}

.site-search__input {
	width: 220px;
	max-width: 100%;
	font-family: var(--font-sans);
	font-size: .85rem;
	padding: .4rem .6rem;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	background: var(--color-bg-muted);
	color: var(--color-text);
}

.site-search__input:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
	background: var(--color-bg);
}

.site-search__results {
	position: absolute;
	top: calc(100% + .35rem);
	right: 0;
	width: 340px;
	max-width: min(90vw, 400px);
	max-height: 70vh;
	overflow-y: auto;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	z-index: 20;
}

.site-search__results ul {
	list-style: none;
	margin: 0;
	padding: .35rem;
}

.site-search__results li {
	margin: 0;
}

.site-search__results a {
	display: block;
	padding: .5rem .6rem;
	border-radius: 6px;
	text-decoration: none;
	color: var(--color-text);
}

.site-search__results a:hover,
.site-search__results a.is-active {
	background: var(--color-bg-muted);
}

.site-search__result-title {
	display: block;
	font-weight: 700;
	font-size: .88rem;
	color: var(--color-primary);
}

.site-search__result-desc {
	display: block;
	font-size: .8rem;
	color: var(--color-text-muted);
	margin-top: .1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.site-search__empty {
	margin: 0;
	padding: .75rem;
	font-size: .85rem;
	color: var(--color-text-muted);
}

.site-header__banner {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: .85rem 1rem 1rem;
	border-top: 1px solid var(--color-border);
	text-decoration: none;
}

.site-header__lockup-row {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.site-header__lockup-icon {
	width: 40px;
	height: 33px;
	flex-shrink: 0;
	color: var(--color-accent);
}

.site-header__lockup-text {
	font-family: var(--font-sans);
	font-size: 1.9rem;
	font-weight: 900;
	letter-spacing: -.01em;
	text-transform: uppercase;
	line-height: 1;
}

.site-header__lockup-black {
	color: var(--color-text);
}

.site-header__lockup-red {
	color: var(--color-accent);
}

.site-header__lockup-sub {
	font-family: var(--font-sans);
	font-size: .85rem;
	font-weight: 600;
	color: var(--color-text-muted);
	padding-left: calc(40px + .6rem);
}

/* ---------- Layout ---------- */

.layout {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: 1rem;
}

/* ---------- Sidebar nav ---------- */
/* The outer mobile toggle uses a checkbox + label (not <details>/<summary>)
   because forcing a <details> element's hidden content visible via CSS at
   the desktop breakpoint is unreliable on first paint in some browsers
   (it can require a reflow, e.g. a window resize, before it renders) -
   a plain :checked sibling selector doesn't have that failure mode.
   The nested submenus below (Order Panels, Menus, etc.) don't force-override
   native <details> state at any breakpoint, so they're unaffected and stay
   as <details>/<summary>. */

.sidebar {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: .5rem .9rem .9rem;
}

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

.sidebar__toggle {
	display: block;
	cursor: pointer;
	font-weight: 900;
	font-size: .95rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-primary);
	padding: .6rem .1rem;
}

.sidebar__nav {
	display: none;
}

.sidebar__toggle-input:checked ~ .sidebar__nav {
	display: block;
}

.sidebar__toggle::before {
	content: "\2261\0020";
	color: var(--color-accent);
}

.sidebar__nav ul {
	list-style: none;
	margin: .25rem 0 0;
	padding: 0;
}

.sidebar__nav li {
	margin: .05rem 0;
}

.sidebar__nav > ul > li > a,
.sidebar__nav summary {
	display: block;
	padding: .4rem .35rem;
	border-radius: 4px;
	font-weight: 700;
	font-size: .92rem;
	color: var(--color-text);
	text-decoration: none;
	cursor: pointer;
}

.sidebar__nav a:hover,
.sidebar__nav summary:hover {
	background: var(--color-bg-muted);
	color: var(--color-primary);
}

.sidebar__nav details ul {
	margin-left: .6rem;
	border-left: 2px solid var(--color-border);
	padding-left: .6rem;
}

.sidebar__nav details[open] > summary {
	color: var(--color-primary);
}

.sidebar__nav details ul li a {
	font-weight: 500;
	font-size: .88rem;
	display: block;
	padding: .3rem .35rem;
	color: var(--color-text);
	text-decoration: none;
	border-radius: 4px;
}

.sidebar__nav details ul li a:hover {
	background: var(--color-bg-muted);
	color: var(--color-primary);
}

/* ---------- Content ---------- */

.content {
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 8px;
	padding: 1.25rem 1.5rem 1.75rem;
	overflow-wrap: break-word;
	min-width: 0;
}

/* ---------- Legacy content classes (used throughout topic body HTML) ---------- */

.body,
.body12pt {
	font-family: var(--font-sans);
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
}

.body12pt {
	font-size: 1rem;
}

.h1,
.heading1 {
	font-family: var(--font-sans);
	font-size: 1.75rem;
	font-weight: 900;
	letter-spacing: -.01em;
	color: var(--color-primary);
	margin: 0 0 .75rem;
}

.heading2 {
	font-family: var(--font-sans);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-text);
}

.heading3 {
	font-family: var(--font-sans);
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-primary);
}

.menulink {
	font-family: var(--font-sans);
	font-size: .8rem;
}

.copyright {
	font-family: var(--font-sans);
	font-size: .78rem;
	font-weight: normal;
	color: var(--color-text-muted);
}

.TopicTextseeitem {
	font-family: var(--font-sans);
	font-size: .8rem;
	font-style: normal;
	font-weight: normal;
}

.TopicToDo {
	font-family: var(--font-sans);
	font-size: .95rem;
	font-weight: 900;
	color: var(--color-primary);
}

.TopicStep {
	font-family: var(--font-sans);
	font-size: .92rem;
	font-weight: normal;
}

.TopicTextseealso {
	font-family: var(--font-sans);
	font-size: .92rem;
	font-style: normal;
	font-weight: 700;
	color: #1a7a3d;
}

.note {
	background-color: var(--color-beige);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-yellow);
	border-radius: 6px;
	padding: .6rem .85rem;
}

/* ---------- Footer ---------- */

.site-footer {
	max-width: var(--content-max-width);
	margin: 0 auto 2rem;
	padding: 0 1rem;
	font-size: .8rem;
	color: var(--color-text-muted);
	text-align: center;
}

.site-footer a {
	color: var(--color-text-muted);
}

.site-footer a:hover {
	color: var(--color-primary);
}

/* ---------- Desktop layout ---------- */
/* Placed last so these overrides win the cascade by source order at equal
   specificity against the base rules above (e.g. .sidebar__toggle's base
   "display: block" defined earlier) - a min-width media query does not
   raise specificity on its own, only order-of-appearance among rules that
   both match resolves the tie. */

@media (min-width: 900px) {
	.layout {
		flex-direction: row;
		align-items: flex-start;
	}

	.sidebar {
		flex: 0 0 var(--sidebar-width);
		position: sticky;
		top: 1rem;
	}

	.content {
		flex: 1;
		min-width: 0;
	}

	.sidebar__toggle-input,
	.sidebar__toggle {
		display: none;
	}

	.sidebar__nav {
		display: block;
	}
}