@charset "UTF-8";

@import "fonts.css";
@import "color.css";
@import "icons.css";
@import "sidebar.css";
@import "spinner.css";

@keyframes fadeIn {
	0%   { opacity: 0; }
	10%  { opacity: 0; }
	100% { opacity: 1; }
}

:root
{
	--FontSizeIcon: 14px;    /* need for smooth animation */
	--FontSizeScaling1: 1.25em; /* title font */
	--FontSizeScaling2: 1em;    /* link font */

	--IconSize: 18px;
	--Spacing:  10px;

	/* App shell — slim 56px icon rail (always visible) */
	--RailWidth: 56px;

	--ContentColor: var(--bg-0);

	--SidebarColor: var(--bg-1);
	--Sidebar2BorderColor: var(--border);

	--SidebarWidth: var(--RailWidth);
	--Sidebar2Width: 0px;

	--SidebarPadding: 0px;
	--SidebarMargin: 0px;
	--SidebarBorderRadius: 0px;
	--SidebarBorderColor: var(--border);

	--SidebarBoxShadow: 0px 0px 0px rgba(0,0,0,0);
	--Sidebar2BoxShadow: 0px 0px 0px rgba(0,0,0,0);

	--Sidebar2Opacity: 0;

	--SidebarTransitionDuration: .2s;
	--SidebarTransitionFast: calc( var(--SidebarTransitionDuration) * 0.5 );
	--SidebarTransitionSlow: calc( var(--SidebarTransitionDuration) * 2.5 );
	--SidebarTransitionFunction: ease-in-out;

	--ContentLeft: var(--RailWidth);

	--LinkPadding: 0px;
	--LinkIconShadow: none;
	--LinkIconShadowHover: none;
}

/* sidebar-closed no longer collapses the rail — the rail is always 56px.
   The class is kept as a no-op so legacy JS calls stay harmless. */
.sidebar-closed
{
	--SidebarWidth: var(--RailWidth);
	--Sidebar2Width: 0px;
	--ContentLeft: var(--RailWidth);
}

.queue-content-active
{
	--ContentLeft: var(--RailWidth);
}

/* Keep rail visible even on the queue page — only hide the (unused) sidebar2 */
.queue-content-active #sidebar2
{
	display: none;
}

*
{
	outline: none;
}

html, body
{
	-webkit-user-select: none;
	user-select: none;

	margin: 0px;
	padding: 0px;

	background-color: var(--bg-0);

	width: 100%;
	height: 100vh;

	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.005em;
	-webkit-font-smoothing: antialiased;

	color: var(--fg-0);

	overflow: hidden;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

a
{
	color: var(--LinkColorDyn);
	border-color: var(--border);

	transition: color var(--SidebarTransitionFast);
}

a:hover
{
	color: var(--LinkColorHover);
	border-color: var(--LinkColorHover);
}

.center
{
	text-align: center;
}

.center:before,
.center:after
{
	content: '';
	flex-grow: 1;
}

a:hover .icon
{
	color: var(--LinkColorHover);
	border-color: var(--LinkColorHover);
	background-color: var(--LinkColorHoverBG);
}

/* The shell area to the right of the rail is a 2-row grid:
   row 1: the persistent outer chrome bar (44px high)
   row 2: the iframe that hosts the active page */
#content
{
	background-color: var(--ContentColor);

	display: grid;
	grid-template-rows: 44px 1fr;
	grid-template-columns: 1fr;
	position: absolute;
	left: var(--ContentLeft);
	right: 0px;
	top: 0px;
	bottom: 0px;

	transition: left var(--SidebarTransitionDuration);
	transition-timing-function: var(--SidebarTransitionFunction);
}

/* Persistent chrome bar — owns crumbs / search / health pill. Rendered
   once at the outer-document level so navigating the rail doesn't flash
   or rebuild the chrome. JS lives in js/outer-chrome.js. */
#content > #outer-chrome
{
	grid-row: 1;
	min-width: 0;
}

#content > iframe
{
	background-color: var(--ContentColor);
	width: 100%;
	height: 100%;
	border: none;

	grid-row: 2;
	min-width: 0;
	min-height: 0;
}

body[data-pq-chrome-owner="frame-app"] #content,
html[data-pq-chrome-owner="frame-app"] #content
{
	grid-template-rows: 1fr;
}

body[data-pq-chrome-owner="frame-app"] #content > #outer-chrome,
html[data-pq-chrome-owner="frame-app"] #content > #outer-chrome
{
	display: none !important;
}

body[data-pq-chrome-owner="frame-app"] #content > iframe,
html[data-pq-chrome-owner="frame-app"] #content > iframe
{
	grid-row: 1;
}

iframe
{
	background-color: var(--ContentColor);
	width: 100%;
	height: 100%;
	border: none;
}