/*
	Chapter rail for Ulysses exports.

	SOURCE OF TRUTH: edit this file, not css/rail.css (build.py copies this
	file there verbatim on every run).

	The reading column (css/style.css, Ulysses' own Georgia theme) is
	untouched — same font, same #c00/#606/#900 link colors. The rail itself
	is deliberately different: the system UI sans-serif, so it reads as
	navigation chrome rather than more of the document.

	Unlike the previous two versions, this isn't an overlay: toggling it
	pushes <body> over by exactly --rail-width (a single shared value, so
	there's no separate "does the layout actually clear the rail?" math to
	get wrong at some viewport width), and it never covers the article text.
	Same push, same rail, at every screen size — no separate mobile layout.
*/

:root {
	--rail-width: 64px;
	--rail-bg: #fdfdfd;
	--rail-border: #ddd;
	--control-bg: rgb(175, 175, 175);
	--control-bg-hover: rgb(89, 89, 89);
	--rail-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
}

/*
	Guard against page-level horizontal scroll. Narrowing #content to make
	room for the rail exposed a pre-existing gap in Ulysses' own
	stylesheet: css/style.css gives wide <table>s their own horizontal
	scrollbar (overflow-x: scroll), but not the <caption> next to them, so
	an unusually long caption can be wider than the reading column and
	push the whole page sideways. Individual elements can still scroll
	horizontally on their own (that's untouched) — this only stops such
	an element from widening the page itself.
*/
html,
body {
	overflow-x: hidden;
}

/* ---------- Toggle button ---------- */

#rail-toggle {
	appearance: none;
	-webkit-appearance: none;
	position: fixed;
	top: 1em;
	left: 1em;
	top: max(1em, env(safe-area-inset-top) + 0.5em);
	left: max(1em, env(safe-area-inset-left) + 0.5em);
	z-index: 1100;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background: var(--control-bg);
	cursor: pointer;
	transition: background 0.2s ease, left 0.25s ease;
}

body.rail-open #rail-toggle {
	left: calc(var(--rail-width) + 1em);
	left: calc(var(--rail-width) + max(1em, env(safe-area-inset-left) + 0.5em));
}

#rail-toggle:hover {
	background: var(--control-bg-hover);
}

#rail-toggle:focus-visible {
	outline: 2px solid var(--control-bg-hover);
	outline-offset: 3px;
}

#rail-toggle .bar {
	position: absolute;
	left: 50%;
	width: 18px;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transform: translateX(-50%);
	transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

#rail-toggle .bar:nth-child(1) { top: 16px; }
#rail-toggle .bar:nth-child(2) { top: 21px; }
#rail-toggle .bar:nth-child(3) { top: 26px; }

#rail-toggle[aria-expanded="true"] .bar:nth-child(1) {
	top: 21px;
	transform: translateX(-50%) rotate(45deg);
}

#rail-toggle[aria-expanded="true"] .bar:nth-child(2) {
	opacity: 0;
}

#rail-toggle[aria-expanded="true"] .bar:nth-child(3) {
	top: 21px;
	transform: translateX(-50%) rotate(-45deg);
}

/* ---------- The rail itself ---------- */

/*
	The push: #content gets margin-left: var(--rail-width) — the same
	variable the rail's own width comes from, so the two can never drift
	out of sync at any viewport size the way an earlier, separate
	hand-picked shift amount once did.

	Two things this ISN'T, both confirmed empirically rather than assumed:
	  - Not margin-left on <body>: body's own margin is already `auto`
	    for centering (from css/style.css), and overriding just
	    margin-left there collapses that centering instead of adding to
	    it — the content jumped the wrong way when tried.
	  - Not a transform on #content: a transform only repositions the
	    already-laid-out box, it doesn't shrink it — so on a narrow
	    viewport, where #content has no spare margin to begin with,
	    translating it right just pushes its unchanged-width box off the
	    right edge of the screen and forces horizontal scroll. margin-left
	    on #content (which — unlike body — starts with no margin at all,
	    so there's no auto-centering to collide with) makes the browser
	    actually reflow the column into the narrower space instead.
*/
#content {
	margin-left: 0;
	transition: margin-left 0.25s ease;
}

body.rail-open #content {
	margin-left: var(--rail-width);
}

#chapter-rail {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: var(--rail-width);
	height: 100%;
	background: var(--rail-bg);
	border-right: 1px solid var(--rail-border);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	padding: calc(env(safe-area-inset-top) + 4.5em) 0
		calc(env(safe-area-inset-bottom) + 2em);
}

body.rail-open #chapter-rail {
	transform: translateX(0);
}

.rail-dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 32px;
}

.rail-dot::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--control-bg);
	transition: background 0.2s ease, transform 0.2s ease;
}

.rail-dot:hover::before,
.rail-dot:focus-visible::before {
	background: var(--control-bg-hover);
}

.rail-dot.active::before {
	background: #c00; /* the article's own link-red, not a new color */
	transform: scale(1.35);
}

/* ---------- Tooltip: the chapter title, shown on demand ---------- */

.rail-tooltip {
	position: absolute;
	left: calc(100% + 0.75em);
	top: 50%;
	transform: translateY(-50%);
	max-width: 220px;
	padding: 0.4em 0.7em;
	background: #2b2b2b;
	color: #fff;
	font-family: var(--rail-font);
	font-size: 0.8rem;
	line-height: 1.3;
	white-space: normal;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 1200;
}

.rail-dot:hover .rail-tooltip,
.rail-dot:focus-visible .rail-tooltip {
	opacity: 1;
}

@media (max-width: 480px) {
	:root {
		--rail-width: 56px;
	}

	.rail-tooltip {
		max-width: 160px;
		font-size: 0.75rem;
	}
}