/* mk-journey.css: /journey/ (the changelog) in "the control room at night". Loaded on the journey page only, after home.css.
   The timeline is a self-contained code module with its own script and data (#cljy); it is restyled ONLY here, through its own
   class names and its own custom properties, remapped to the tokens. Its script, markup and data are not touched.
   Visitor task: "what changed recently?", so the widget sits directly under a short header and its newest entries lead. */

body.dsd #page-container .dsdm-journey-hero {
	padding-top: 56px !important;
	padding-bottom: 32px !important;
}
body.dsd #page-container .dsdm-journey-hero .dsdh-row--head { margin-bottom: 0 !important; gap: 20px; }
body.dsd #page-container .dsdm-journey-h1 h1.et_pb_module_header {
	font-size: clamp(34px, 4.2vw, 54px) !important;
	line-height: 1.04 !important;
	letter-spacing: -0.03em !important;
	max-width: 24ch;
}
body.dsd #page-container .dsdm-journey-stage { padding-top: 0 !important; padding-bottom: 56px !important; }
body.dsd #page-container .dsdm-journey-stage::before { display: none !important; }
body.dsd #page-container .dsdm-journey-col { gap: 32px !important; }

/* ---------- the widget: variables remapped, fonts and sizes brought to the system ---------- */

body.dsd #cljy {
	--bg: var(--dsc-bg);
	--panel: var(--dsc-surface);
	--panel2: var(--dsc-raised);
	--raise: var(--dsc-raised);
	--line: var(--dsc-line);
	--line2: var(--dsc-line-strong);
	--ink: var(--dsc-text);
	--ink2: var(--dsc-muted-long);
	--ink3: var(--dsc-muted);
	--blue: var(--dsc-link);
	--teal: var(--dsc-accent);
	--green: var(--dsc-ok);
	--amber: var(--dsc-warn);
	--red: var(--dsc-bad);
	--violet: var(--dsc-violet);
	--pink: var(--dsc-line-strong);
	--sans: var(--dsc-font);
	--serif: var(--dsc-font);
	--mono: var(--dsc-mono);
	max-width: none;
	padding: 0;
	background: transparent;
	font-size: 15px;
}
/* the page header above already says this (eyebrow and lede); the widget keeps its entry stamps */
body.dsd #cljy .j-eyebrow,
body.dsd #cljy .j-lede { display: none; }
body.dsd #cljy .j-head { justify-content: flex-start; padding: 0 0 16px; }
body.dsd #cljy .j-stamps { justify-content: flex-start; }
body.dsd #cljy .j-stamp {
	font-size: 12px;
	background: transparent;
	border-color: var(--dsc-line);
	color: var(--dsc-text);
}

/* counts: an instrument strip, amber mono numerals, hairline frame */
body.dsd #cljy .j-counts { border-radius: var(--dsc-r-card); }
body.dsd #cljy .j-count { min-height: 0; padding: 14px 16px; }
body.dsd #cljy .j-count b { font-size: 1.6rem; font-weight: 400; color: var(--dsc-warn); }
body.dsd #cljy .j-count span { font-size: 13px; font-weight: 600; color: var(--dsc-text); }
body.dsd #cljy .j-count small { font-size: 12px; color: var(--dsc-muted); }

/* search and filter chips */
body.dsd #cljy .j-controls { border-color: var(--dsc-line); border-radius: var(--dsc-r-card); }
body.dsd #cljy .j-search input {
	min-height: 44px;
	background: var(--dsc-bg);
	border-color: var(--dsc-line-strong);
	border-radius: 8px;
	font-size: 16px;
}
body.dsd #cljy .j-search input:focus { border-color: var(--dsc-accent); outline: 2px solid var(--dsc-accent); outline-offset: 1px; }
body.dsd #cljy .j-clear { min-height: 44px; font-size: 12px; border-radius: var(--dsc-r-btn); }
body.dsd #cljy .j-fgroup .j-flabel { font-size: 12px; }
body.dsd #cljy .j-chip {
	min-height: 32px;
	padding: 4px 12px;
	font-size: 12px;
	background: transparent;
	border-color: var(--dsc-line-strong);
}
body.dsd #cljy .j-chip[aria-pressed="true"] {
	background: rgba(38, 198, 218, 0.14);
	border-color: var(--dsc-accent);
	color: var(--dsc-text);
}

/* the timeline rail, the list and the status cards */
body.dsd #cljy .j-ribbon-wrap { border-radius: var(--dsc-r-card); }
body.dsd #cljy .j-rail-title,
body.dsd #cljy .j-legend,
body.dsd #cljy .j-foot,
body.dsd #cljy .j-date,
body.dsd #cljy .j-month h3,
body.dsd #cljy .j-body .j-src,
body.dsd #cljy .j-card dt,
body.dsd #cljy .j-refusal .j-lbl,
body.dsd #cljy .j-tip .j-mono,
body.dsd #cljy .j-withheld { font-size: 12px; }
body.dsd #cljy .j-card { border-radius: var(--dsc-r-card); }
body.dsd #cljy .j-card h4 { font-size: 17px; font-weight: 600; }
body.dsd #cljy .j-refusal { border-radius: var(--dsc-r-card); }
body.dsd #cljy .j-title button { min-height: 32px; }
body.dsd #cljy .j-more { min-height: 44px; font-size: 13px; }
body.dsd #cljy a { color: var(--dsc-link); }
body.dsd #cljy a:hover { color: var(--dsc-accent-hover); }

/* newest entries first on a narrow screen: the list, then the timeline, then the status cards */
@media (max-width: 1180px) {
	body.dsd #cljy .j-status { grid-row: auto; order: 3; }
}
@media (max-width: 900px) {
	body.dsd #cljy .j-list { order: 1; }
	body.dsd #cljy .j-rail { order: 2; }
	body.dsd #cljy .j-status { order: 3; }
}
@media (max-width: 767px) {
	body.dsd #page-container .dsdm-journey-hero { padding-top: 32px !important; padding-bottom: 24px !important; }
	body.dsd #cljy .j-chip { min-height: 36px; }
}

/* ---------- the note: how fixes are checked, a hairline note ---------- */

body.dsd #page-container .dsdm-journey-note .et_pb_text_inner { max-width: 72ch; padding: 4px 0 4px 16px; border-left: 2px solid var(--dsc-line-strong); }
body.dsd #page-container .dsdm-journey-note .et_pb_text_inner p { margin: 0; font-size: 15px; line-height: 1.55; }
body.dsd #page-container .dsdm-journey-note .et_pb_text_inner p.dsdm-journey-note__k {
	margin-bottom: 6px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}

/* ---------- the plain list (the Divi Loop, for when the script is not running) ---------- */

body.dsd #page-container .dsdm-journey-entries.et_pb_column {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
body.dsd #page-container .dsdm-journey-entries .et_pb_group.dsdm-journey-entry {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px !important;
	margin: 0 !important;
	padding: 18px 20px !important;
	background: var(--dsc-surface) !important;
	border: 1px solid var(--dsc-line) !important;
	border-radius: var(--dsc-r-card) !important;
	box-shadow: none !important;
}
body.dsd #page-container .dsdm-journey-entry .dsdh-h3 h3.et_pb_module_header { font-size: 18px !important; line-height: 1.3 !important; }
body.dsd #page-container .dsdm-journey-entry .et_pb_text_inner p { margin: 0; font-size: 15px; line-height: 1.5; }
body.dsd #page-container .dsdm-journey-entry__meta .et_pb_text_inner p {
	font-family: var(--dsc-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsc-accent);
}
@media (max-width: 767px) {
	body.dsd #page-container .dsdm-journey-entries.et_pb_column { grid-template-columns: minmax(0, 1fr); }
}