/* Shared TinKan browser-layout rules.
 * Loaded by the application header and every standalone TinKan page. */
@media (min-width: 768px) {
	html {
		/* Avoid horizontal reflow when dynamic content makes a page scrollable. */
		overflow-y: scroll;
		scrollbar-gutter: stable;
	}
}

/* Shared disclosure treatment. The companion script preserves native <details>
 * semantics while animating its content height and a small fade/settle. */
details[data-tinkan-accordion] > .tinkan-accordion-content {
	overflow: hidden;
}

details[data-tinkan-accordion].tinkan-accordion-animating > .tinkan-accordion-content {
	will-change: height, opacity, transform;
	transition: height 180ms ease, opacity 160ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
	details[data-tinkan-accordion].tinkan-accordion-animating > .tinkan-accordion-content {
		transition: none;
	}
}

/* Board-toolbar controls inherit theme-specific translucent surface tokens from
 * the board sheet. Lucide SVG strokes follow currentColor. */
.tinkan-toolbar-icon {
	border: 1px solid var(--tinkan-toolbar-muted-border, rgba(15, 23, 42, .18));
	background-color: var(--tinkan-toolbar-muted-bg, rgba(15, 23, 42, .06));
	color: var(--tinkan-toolbar-muted-fg, rgba(15, 23, 42, .72));
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.tinkan-toolbar-icon:hover {
	border-color: var(--tinkan-toolbar-active-border, rgba(15, 23, 42, .96));
	color: var(--tinkan-toolbar-active-fg, #fff);
}

.tinkan-toolbar-icon.is-active {
	border: 2px solid var(--tinkan-toolbar-active-border, rgba(15, 23, 42, .96));
	background-color: var(--tinkan-toolbar-active-bg, #0f172a);
	color: var(--tinkan-toolbar-active-fg, #fff);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
}

/* Clean, list-style sidebar navigation. The accent follows the board's custom
 * active-filter colour while its copy follows the sheet luminance. */
.tinkan-themed-sidebar .tinkan-sidebar-nav-item {
	border: 0 !important;
	border-left: 3px solid transparent !important;
	border-radius: 0 !important;
	background-color: transparent !important;
	color: var(--tinkan-toolbar-muted-fg, rgba(15, 23, 42, .72)) !important;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.tinkan-themed-sidebar .tinkan-sidebar-nav-item:hover,
.tinkan-themed-sidebar .tinkan-sidebar-nav-item:focus-visible {
	border-left-color: color-mix(in srgb, var(--tinkan-sidebar-accent, #2563eb) 55%, transparent) !important;
	border-radius: .375rem !important;
	background-color: color-mix(in srgb, var(--tinkan-sidebar-accent, #2563eb) 10%, transparent) !important;
	color: var(--tinkan-sidebar-fg, #0f172a) !important;
}

.tinkan-themed-sidebar .tinkan-sidebar-nav-item.is-active {
	border-left-color: var(--tinkan-sidebar-accent, #2563eb) !important;
	border-radius: .375rem !important;
	background-color: color-mix(in srgb, var(--tinkan-sidebar-accent, #2563eb) 18%, transparent) !important;
	color: var(--tinkan-sidebar-fg, #0f172a) !important;
	font-weight: 700;
}

.tinkan-themed-sidebar .tinkan-sidebar-nav-item.is-active > svg {
	opacity: 1;
}

.tinkan-themed-sidebar nav {
	gap: .375rem !important;
}

.tinkan-themed-sidebar .tinkan-sidebar-nav-item {
	min-height: 2.5rem;
}

.tinkan-themed-sidebar .tinkan-sidebar-label > span:last-child {
	display: none;
}

.tinkan-themed-sidebar .tinkan-sidebar-label > span:first-child {
	font-size: .875rem;
	line-height: 1.25rem;
}

.tinkan-themed-sidebar .tinkan-sidebar-context > p:first-child,
.tinkan-themed-sidebar .tinkan-sidebar-context > p:last-child,
.tinkan-themed-sidebar .tinkan-sidebar-label.text-slate-400 {
	color: var(--tinkan-toolbar-muted-fg, rgba(15, 23, 42, .72)) !important;
}

.tinkan-themed-sidebar .tinkan-sidebar-context > p:nth-child(2) {
	color: inherit !important;
}