Template:Category/Workshop itinerary/styles.css

/* TemplateStyles for [[Template:Category/Workshop itinerary]].
 *
 * Screen-first: titles and session names render as normal wiki links
 * (accent color + underline-on-hover) so participants can navigate from
 * the itinerary to any session page. The @media print block strips
 * link chrome (color: inherit; text-decoration: none) blanket-style
 * for paper handouts where URLs aren't actionable, plus adds
 * page-break-before on each day so a single sheet never spans two days.
 *
 * Theme colors via `var(--labki-*, literal)`; see {{UI/card}}/styles.css
 * for the rationale. CATEGORY colors (.is-content, .is-practical,
 * .is-meal, .is-social, .is-break) deliberately stay literal — they're
 * discrete category signals, not theme tokens, and need to read the
 * same regardless of light/dark mode.
 */

.wiki-itinerary-nav {
	margin-bottom: 18px;
}

.wiki-itinerary {
	max-width: 760px;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--labki-text, #1c1c1c);
	line-height: 1.45;
}

.wiki-itinerary-header {
	text-align: center;
	padding: 24px 0 18px;
	border-bottom: 2px solid var(--labki-text, #1c1c1c);
	margin-bottom: 28px;
}

.wiki-itinerary-title {
	font-size: 1.9em;
	font-weight: bold;
	letter-spacing: 0.02em;
	margin-bottom: 6px;
}

.wiki-itinerary-dates {
	font-size: 1.1em;
	font-style: italic;
	margin-bottom: 4px;
}

.wiki-itinerary-venue {
	font-size: 0.95em;
	color: var(--labki-text-muted, #444);
	margin-bottom: 4px;
}

.wiki-itinerary-day {
	margin-bottom: 36px;
}

.wiki-itinerary-day-header {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--labki-border, #d8dde3);
	margin-bottom: 12px;
}

.wiki-itinerary-day-number {
	font-size: 1.3em;
	font-weight: bold;
	letter-spacing: 0.03em;
}

.wiki-itinerary-day-date {
	font-size: 1.05em;
	color: var(--labki-text-muted, #444);
	font-style: italic;
}

/* Day-level UTC offset label, rendered as "UTC(+2)" / "UTC(-7)" /
 * "UTC" from the workshop's Has timezone offset. margin-left:auto
 * pushes it to the right edge of the flex day-header. */
.wiki-itinerary-day-tz {
	margin-left: auto;
	font-size: 0.8em;
	color: #777;
	letter-spacing: 0.04em;
	font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.wiki-itinerary-day-sessions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wiki-itinerary-session {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 16px;
	padding: 8px 0 8px 12px;
	border-bottom: 1px solid #eef0f3;
	border-left: 3px solid var(--labki-border, #d8dde3);
}

.wiki-itinerary-session:last-child {
	border-bottom: none;
}

/* Category color coding. The left-border stripe carries the primary
 * signal (visible in print, even B&W if rendered as a thicker rule);
 * the type chip's background tint is the secondary cue. Defaults
 * (.is-other) inherit the neutral border token set above.
 *
 * These colors stay literal: they're discrete per-category signals,
 * not theme tokens. `border-left-color` is also one of the properties
 * MW's css-sanitizer rejects var() in, which would force literals
 * here regardless. */

.wiki-itinerary-session.is-content {
	border-left-color: #2774AE;
}
.wiki-itinerary-session.is-content .wiki-itinerary-type {
	background: #e8f0f7;
	color: #1c4e7a;
	border-color: #b8d2e6;
}

.wiki-itinerary-session.is-practical {
	border-left-color: #9B59B6;
}
.wiki-itinerary-session.is-practical .wiki-itinerary-type {
	background: #f3eaf7;
	color: #6c3483;
	border-color: #d7b8e3;
}

.wiki-itinerary-session.is-meal {
	border-left-color: #E67E22;
}
.wiki-itinerary-session.is-meal .wiki-itinerary-type {
	background: #fbeee0;
	color: #a04a0d;
	border-color: #e8c79a;
}

.wiki-itinerary-session.is-social {
	border-left-color: #27AE60;
}
.wiki-itinerary-session.is-social .wiki-itinerary-type {
	background: #e6f5eb;
	color: #196f3d;
	border-color: #b5dec5;
}

.wiki-itinerary-session.is-break {
	border-left-color: #95A5A6;
}
.wiki-itinerary-session.is-break .wiki-itinerary-type {
	background: #eef0f1;
	color: #5d6d6e;
	border-color: #c8cdce;
}

.wiki-itinerary-time {
	font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
	font-size: 0.95em;
	color: var(--labki-text, #333);
	white-space: nowrap;
	padding-top: 2px;
}

.wiki-itinerary-time-sep {
	margin: 0 2px;
	color: #999;
}

.wiki-itinerary-content {
	min-width: 0;
}

/* Title row: title on the left, type chip pinned to the right via
 * flex space-between. Without this, the chip sits inline after the
 * title and drifts horizontally based on title length — unreadable
 * across a column of varying titles. */
.wiki-itinerary-session-title {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-weight: bold;
	font-size: 1.02em;
	margin-bottom: 3px;
}

.wiki-itinerary-session-name {
	min-width: 0;
}

/* Optional suffix after the parent session title — "(Part 1)" /
 * "(Morning)" / "Setup" etc. Kept in muted color and normal weight so
 * the parent title remains the dominant signal. */
.wiki-itinerary-session-label {
	color: var(--labki-text-muted, #5a6a7a);
	font-weight: normal;
}

/* Chips wrapper holds the optional group chip and the type chip on
 * the right side of the title row. flex-shrink: 0 keeps the wrapper
 * from stealing space from the title; the inner gap separates the
 * two chips when both are present. */
.wiki-itinerary-chips {
	flex-shrink: 0;
	display: flex;
	gap: 6px;
	align-items: baseline;
}

.wiki-itinerary-type {
	padding: 1px 7px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.72em;
	font-weight: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--labki-text-muted, #555);
	background: var(--labki-bg-subtle, #f4f6f8);
	border: 1px solid var(--labki-border, #d8dde3);
	border-radius: 3px;
}

/* Group chip — signals which participant group(s) a delivery is for
 * when multiple sessions share a start time. Accent-colored outline
 * (vs. type chip's muted fill) reads as a "different axis of meaning"
 * — type is "what kind", group is "who". */
.wiki-itinerary-group {
	padding: 1px 7px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--labki-accent, #2774AE);
	background: transparent;
	border: 1px solid var(--labki-accent, #2774AE);
	border-radius: 3px;
}

/* Topic — short scannable gist of the session, sits between the
 * title row and the presenter/location meta lines. Distinct from
 * Has description (which is the long-form prose on the session's
 * own page). Plain (not italic — italic is reserved for presenter). */
.wiki-itinerary-topic {
	font-size: 0.95em;
	color: var(--labki-text, #1c1c1c);
	line-height: 1.35;
	margin-bottom: 2px;
}

/* Presenter and location each on their own line. Multi-value Has
 * presenter (co-led sessions) reads better stacked than crowded into
 * a single meta line next to a location. SMW comma-joins the
 * wikilinks for us when the outer #ask is run without link=none. */

.wiki-itinerary-presenter {
	font-size: 0.92em;
	color: var(--labki-text-muted, #444);
	font-style: italic;
}

.wiki-itinerary-where {
	font-size: 0.88em;
	color: var(--labki-text-muted, #555);
}

.wiki-itinerary-where::before {
	content: "@ ";
	color: #aaa;
}

/* TA meta line — same weight as Where; prefixed by "TAs:" inline in
 * the row template (no ::before pseudo-element here because the prefix
 * is part of the rendered content, not decorative). */
.wiki-itinerary-tas {
	font-size: 0.88em;
	color: var(--labki-text-muted, #555);
}

@media print {
	.wiki-itinerary-nav {
		display: none;
	}

	.wiki-itinerary {
		max-width: 100%;
		font-size: 11pt;
	}

	.wiki-itinerary-day {
		page-break-before: always;
		break-before: page;
	}

	.wiki-itinerary-day:first-of-type {
		page-break-before: auto;
		break-before: auto;
	}

	.wiki-itinerary-session {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.wiki-itinerary a,
	.wiki-itinerary a:visited {
		color: inherit;
		text-decoration: none;
	}
}