/* Settings frame, section nav and intro, copied from the branding demo v3b (branding.css), branding parts stripped. */
html.tr {
	--line: rgba(16, 17, 25, 0.1);
	--line-2: rgba(16, 17, 25, 0.16);
	--r-card: 12px;
	--r-ctl: 8px;
	--wash: color-mix(in oklab, var(--primary) 7%, transparent);
	--wash-2: color-mix(in oklab, var(--primary) 12%, transparent);
	--primary-fg: #ffffff;
	--ats-title: #1e1e20;
	--ok: #16a34a;
	--sticky-top: calc(var(--head-h) + 1rem);
}
html.tr .cs-crumb h1 { font-family: var(--font-display); color: var(--ats-title); }
html.tr .btn-primary { color: var(--primary-fg); }
html.tr .btn { border-radius: var(--r-ctl); }
html.tr .toast-wrap { bottom: 24px; }
html.tr .cs-user .cs-av { background: var(--sb-primary, var(--primary)); color: var(--sb-primary-fg, #fff); }

/* ---------------------------------------------------------------- settings frame */
.st { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.st.is-wide { grid-template-columns: auto minmax(0, 1fr); }
.st-main { min-width: 0; }

/* the rail: the real SettingsSectionNav (group labels are live-app parity, the shell's own style) */
.st-rail { position: sticky; top: var(--sticky-top); display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); width: 16rem; transition: width 240ms var(--ease); }
.st-g { display: flex; flex-direction: column; gap: 0.125rem; }
.st-gl { padding: 0 0.75rem 0.25rem; font-size: 0.7857rem; font-weight: 500; line-height: 1.15; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; }
.st-i { display: flex; align-items: center; gap: 0.625rem; height: 2.375rem; padding: 0 0.75rem; border-radius: var(--r-ctl); font-size: var(--text-sm); color: var(--muted-fg); white-space: nowrap; overflow: hidden; transition: background-color 150ms var(--ease), color 150ms var(--ease); }
.st-i .ic { flex: none; width: 1rem; height: 1rem; }
.st-i span { overflow: hidden; text-overflow: ellipsis; }
.st-i:hover { background: color-mix(in oklab, var(--accent) 60%, transparent); color: var(--fg); }
.st-i[aria-current='page'] { background: var(--wash-2); color: var(--primary); font-weight: 500; }
.st-top { display: none; }
.st-rail .st-top[hidden] { display: none; }
/* slim: one icon a section, names on hover or focus, a button to widen */
.st-rail.slim { width: 3.375rem; gap: 0.375rem; }
.st-rail.slim .st-gl { display: none; }
.st-rail.slim .st-g + .st-g { padding-top: 0.375rem; border-top: 1px solid var(--line); }
.st-rail.slim .st-i { width: 2.375rem; padding: 0; justify-content: center; gap: 0; }
.st-rail.slim .st-i span { display: none; }
.st-rail.is-wide-able .st-top { display: flex; justify-content: flex-end; }
.st-rail.slim .st-top { justify-content: center; padding-bottom: 0.125rem; border-bottom: 1px solid var(--line); margin-bottom: 0.125rem; }
.st-widen { display: grid; place-items: center; width: 2.375rem; height: 2.125rem; border-radius: var(--r-ctl); color: var(--muted-fg); }
.st-widen:hover { color: var(--fg); background: color-mix(in oklab, var(--accent) 60%, transparent); }
.tip { position: fixed; z-index: 950; padding: 6px 9px; border-radius: 8px; background: var(--fg); color: #fff; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-3px); transition: opacity 140ms var(--ease), transform 220ms var(--ease); }
.tip.show { opacity: 1; transform: none; }

/* below the real lg breakpoint: the section switcher */
.st-sw { display: none; }
@media (max-width: 1023.98px) {
	.st, .st.is-wide { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
	.st-rail { display: none; }
	.st-sw { display: flex; align-items: center; gap: 10px; width: 100%; height: 56px; padding: 0 12px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); text-align: left; }
	.st-sw-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--wash-2); color: var(--primary); }
	.st-sw b { flex: 1; font-size: var(--text-sm); font-weight: 500; }
}

/* ---------------------------------------------------------------- room intro (title + one line) */
.rm-intro { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.25rem 0 1.25rem; }
.rm-intro h2 { font-family: var(--font-display); font-size: 1.4286rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; color: var(--ats-title); }
.rm-intro p { font-size: var(--text-sm); line-height: 1.5; color: var(--muted-fg); max-width: 34rem; }
.rm-intro p a, .lnk { color: var(--primary); font-weight: 500; cursor: pointer; }
.lnk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); }
.lnk:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the header row actions: status, discard, save */
.sv { display: flex; align-items: center; gap: 0.5rem; }
.f { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.f > label, .f-l { font-size: var(--text-sm); font-weight: 500; color: var(--fg-2); }
.f-l em, .f > label em { font-style: normal; font-weight: 400; color: var(--muted-fg); }
.hint, .note { font-size: var(--text-xs); line-height: 1.5; color: var(--muted-fg); }
.note { display: flex; gap: 6px; align-items: flex-start; }
/* outside-the-demo settings pages */
.sk-card2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.875rem; }
.sk-card2 h2 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--ats-title); }
.sk-card2 p { font-size: var(--text-sm); color: var(--muted-fg); }
.sk-card2 .sk-bar { height: 2.375rem; border-radius: 8px; background: var(--input); }