/* ==========================================================================
   Launch Suit DS components. All values come from tokens.css.
   .is-hover and .is-active let the docs page show states without a mouse.
   ========================================================================== */

/* ---------- Name ----------
   Redaction 50 Italic in suit orange, 28px on a 32px line. That counts as large
   text, which needs 3:1; suit orange is 2.95:1 on the day canvas, just short.
   The role line under it is a .label with no bottom margin. */
.name {
	font-family: var(--font-display);
	font-size: var(--size-display);
	font-style: italic;
	font-weight: 400;
	color: var(--accent);
	line-height: var(--leading-display);
	letter-spacing: 0;
}

/* ---------- Button ----------
   24px tall, fully rounded, a surface with a hairline ring. */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--unit) * 2);                /* 24px */
	padding: 0 var(--space-s);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: 0 0 0 1px var(--ring), var(--shadow-card);
	font: inherit;
	font-size: var(--size-small);
	font-weight: 500;
	letter-spacing: inherit;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.button:hover,
.button.is-hover {
	background: var(--surface-hover);
	box-shadow: 0 0 0 1px var(--ring-hover), var(--shadow-card-hover);
}

.button:active {
	transform: scale(0.96);
}

.icon-button {
	width: calc(var(--unit) * 2);
	padding: 0;
	color: var(--muted);
}

.icon-button:hover,
.icon-button.is-hover {
	color: var(--text);
}

/* Theme toggle: show the theme you'd switch to (sun at night, moon by day) */
[data-theme="dark"] .icon-moon,
[data-theme="light"] .icon-sun {
	display: none;
}

/* ---------- Tag ----------
   A small, fully rounded pill. */
.tag {
	display: inline-block;
	padding: calc(var(--space-2xs) - 1px) var(--space-xs); /* 4px from the edge, border included */
	white-space: nowrap;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	font-size: var(--size-tag);
	font-weight: 500;
	line-height: calc(var(--unit) * 4 / 3);       /* 16px, for a 24px pill */
	letter-spacing: 0.01em;
	color: var(--muted);
}

.tag-dates {
	font-variant-numeric: tabular-nums;
}

/* ---------- Company ----------
   One block per company: a head row like a CV line (company, role, dates), one
   line about the company, then its work as a project list or mentions. */
.companies {
	display: grid;
	gap: var(--space-l);
}

/* Company name with the role and dates pills beside it; they wrap under it on narrow screens */
.company-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-s);
	margin-bottom: var(--space-2xs);
}

/* Company names: Redaction 50 Italic like the name, but in --text and smaller */
.company-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--size-heading);
	font-style: italic;
	font-weight: 400;
	line-height: var(--leading);
	letter-spacing: 0;
}

.company-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
}

.company-desc {
	text-wrap: pretty;
	margin-bottom: var(--space-s);
	color: var(--muted);
}

.company-desc:last-child {
	margin-bottom: 0;
}

/* ---------- Project list ----------
   A timeline: rows indented under their company, no dividers, with a 1px line in
   the gutter and an 8px node on each title. Titles are Newsreader italic,
   support text in --muted. An optional 48px icon (.card-image) sits left of the
   text. Until a case study exists, hovering fades the row to 12% and lays
   "Coming soon" over it in Redaction 70 (the cartwheel cursor is in pixel.css). */
.cards {
	margin-left: var(--space-m);
}

.card-slot {
	position: relative;
}

.card {
	transition: opacity var(--duration) var(--ease-out);
}

.card-inner {
	padding: var(--space-s) 0;
}

.card-inner:has(> .card-image) {
	display: grid;
	grid-template-columns: calc(var(--unit) * 4) 1fr; /* a 48px icon */
	align-items: center;
	gap: var(--space-s);
}

.card-slot::before,
.card-slot::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* Node: 8px, centered on the title's line (the row's 12px padding + half its
   24px line). It sits above the line, with a canvas-colored ring so the line
   stops short of it. */
.card-slot::before {
	z-index: 1;
	top: calc(var(--space-s) + var(--leading) / 2 - var(--space-2xs));
	left: calc(-1 * var(--space-m));
	width: var(--space-xs);
	height: var(--space-xs);
	border-radius: 50%;
	background: var(--faint);
	box-shadow: 0 0 0 3px var(--canvas);
}

/* The line, through the middle of the nodes (3.5px + half of 1px = the middle of 8px) */
.card-slot::after {
	top: 0;
	bottom: 0;
	left: calc(-1 * var(--space-m) + 3.5px);
	width: 1px;
	background: var(--line);
}

/* It ends at the last node */
.card-slot:last-child::after {
	bottom: auto;
	height: calc(var(--space-s) + var(--leading) / 2);
}

/* "Coming soon": left-aligned with the row, in suit orange (24px, large
   text: 2.95:1 on the day canvas, just short of 3:1) */
.card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	font-family: var(--font-pixel);
	font-size: var(--size-display-l);
	letter-spacing: 0;
	color: var(--accent);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--duration) var(--ease-out);
}

@media (hover: hover) {
	.card-slot:hover .card {
		opacity: 0.12;
	}

	.card-slot:hover .card-overlay {
		opacity: 1;
	}
}

.card-slot.is-hover .card {
	opacity: 0.12;
}

.card-slot.is-hover .card-overlay {
	opacity: 1;
}

/* Icon: one small visual per project, like an app icon. Placeholder until real ones exist. */
.card-image {
	width: calc(var(--unit) * 4);                 /* 48px */
	aspect-ratio: 1;
	border-radius: var(--radius-icon);
	background:
		repeating-linear-gradient(-45deg, transparent 0 4px, var(--ring) 4px 5px),
		var(--canvas);
	box-shadow: inset 0 0 0 1px var(--ring);
}

.card-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: calc(var(--size-body) * var(--italic-boost));
	font-style: italic;
	font-weight: 400;
	line-height: var(--leading);
	letter-spacing: 0;
}

.card-desc {
	text-wrap: pretty;
	line-height: var(--leading);
	color: var(--muted);
}

/* ---------- Mentions ----------
   Smaller work named in one line. Each name opens a popover (popover.js). At
   rest, names are --mention (--text at night, --muted by day, so they don't
   outweigh the company names above) with gray dotted underlines. */
.mentions-names {
	color: var(--muted);
}

.mention {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 500;
	letter-spacing: inherit;
	color: var(--mention);
	text-decoration: underline dotted var(--faint);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	cursor: default;
	transition: color var(--duration-fast) var(--ease-out), text-decoration-color var(--duration-fast) var(--ease-out);
}

/* The active name turns --text with orange dots, matching the popover's
   orange border, so the two read as one. The others dim. */
.mention.is-active {
	color: var(--text);
	text-decoration-color: var(--accent);
}

.has-active .mention:not(.is-active) {
	color: var(--faint);
	text-decoration-color: var(--faint);
}

/* ---------- Overflow ----------
   A quiet "+N more" that names the rest in a popover. */
.more {
	margin-top: var(--space-m);
}

.more-toggle {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--size-small);
	letter-spacing: inherit;
	color: var(--faint);
	cursor: default;
	transition: color var(--duration-fast) var(--ease-out);
}

.more-toggle.is-active {
	color: var(--text);
	text-decoration: underline dotted var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* ---------- Popover ----------
   Floats above its trigger and never moves the page. Placed by popover.js.
   The orange border ties it to the active trigger's orange dots. Its height is
   always n 24px lines + 24px padding + 2px border, so with its bottom fixed
   above the trigger, the top edge lands between two lines of the text behind
   it instead of slicing descenders. Keep the text on a 24px (or 12px-multiple)
   line if its size changes (PKS-54). */
.pop-group {
	position: relative;
}

.popover {
	position: absolute;
	z-index: 1;
	width: max-content;
	max-width: min(calc(var(--unit) * 30), 100%); /* 360px */
	padding: var(--space-s);
	border: 1px solid var(--accent);
	border-radius: var(--radius-card-inner);
	background: var(--surface);
	box-shadow: var(--shadow-pop);
	font-size: var(--size-small);
	line-height: var(--leading);
	color: var(--muted);
	text-wrap: pretty;
	pointer-events: none;
	translate: 0 calc(-100% - var(--space-xs));
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px) scale(0.98);
	transform-origin: bottom left;
	transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility 0s var(--duration-fast);
}

.popover.is-shown {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.popover {
		transform: none;
	}
}