/* ============================================================
   claroview.css — shared Claroview Maintainability Cloud brand kit
   ------------------------------------------------------------
   Single source of truth for the deck look & feel. Link this from
   every presentation (and the landing page) so brand tokens and
   primitives stay consistent:

       <link rel="stylesheet" href="../claroview.css" />

   Layers:
     1. Design tokens (:root)            — colours + type. The core.
     2. Reveal base + typography         — applies inside .reveal.
     3. Brand primitives & components    — spectrum, cards, chips…
   Genuinely slide-specific one-offs stay in each deck's local
   <style> block, not here.
   Navy/gold brand chrome from the product (mc-portal BRAND);
   red→amber→green is reserved for the Sokrates score spectrum.
   ============================================================ */

/* ---- 1 · Design tokens ------------------------------------ */
:root {
	/* Claroview brand palette — mc-portal/ui/src/lib/colors.ts (BRAND) */
	--navy:        #141437; /* page background         */
	--navy-deep:   #0A0A1F; /* ink / deepest bg        */
	--navy-panel:  #1F1F4A; /* cards / raised surfaces */
	--navy-line:   #2A2A5A; /* borders / accents       */
	--gold:        #F4D03F; /* headings / accent       */
	--gold-deep:   #F1C40F; /* buttons / hover         */
	/* Sokrates RdYlGn score gradient — the product's own scoring palette */
	--red:         #d7191c; /* worst score  */
	--poor:        #fb9a3a; /* poor score   */
	--cream:       #ffe53d; /* moderate score (text-legible) */
	--cream-soft:  #ffe53d; /* moderate fill                 */
	--green-soft:  #a6d96a; /* good score   */
	--green:       #1a9641; /* best score   */
	--paper:       #f6f7fb;
	--ink:         #e9eaf4; /* body text on navy    */
	--ink-dim:     #a7a9c8; /* secondary text       */
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	        Helvetica, Arial, sans-serif;

	/* Signature background motif (reused by decks and landing) */
	--cv-bg-image:
		radial-gradient(1200px 600px at 78% -10%, rgba(244,208,63,0.10), transparent 60%),
		radial-gradient(900px 500px at -5% 110%, rgba(26,150,65,0.10), transparent 55%);
}

/* ---- 2 · Reveal base + typography ------------------------- */
.reveal {
	font-family: var(--sans);
	font-size: 34px;
	font-weight: 400;
	color: var(--ink);
	letter-spacing: -0.005em;
}
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

.reveal-viewport {
	background: var(--navy);
	background-image: var(--cv-bg-image);
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
	font-family: var(--sans);
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	text-transform: none;
	margin: 0 0 0.35em;
	text-shadow: none;
}
.reveal h1 { font-size: 2.35em; }
.reveal h2 { font-size: 1.7em; }
.reveal h3 { font-size: 1.15em; }
.reveal p  { line-height: 1.4; }
.reveal strong { color: #fff; font-weight: 700; }
.reveal em { color: var(--gold); font-style: italic; }
.reveal a { color: var(--gold); text-decoration: none; }

.reveal .progress { color: var(--gold); height: 4px; }
.reveal .controls { color: var(--ink-dim); }

/* ---- 3 · Brand primitives & components -------------------- */

/* Signature motif: the maintainability spectrum bar. Context-neutral
   (px-based) so it renders identically on decks and the landing. */
.spectrum {
	height: 8px; width: 220px; border-radius: 4px;
	background: linear-gradient(90deg, var(--red) 0%, var(--red) 26%,
		var(--cream-soft) 45%, var(--cream-soft) 62%, var(--green) 82%);
	box-shadow: 0 0 24px rgba(255,255,255,0.10);
}
.spectrum.sm { width: 120px; height: 6px; }

/* Brand header bits are em-sized against the reveal root, so they are
   scoped to .reveal to keep them off non-deck pages (the landing page
   sizes its own header in rem). */
.reveal .eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.5em;
	font-weight: 700;
	color: var(--ink-dim);
	margin: 0 0 1.1em;
}
.reveal .eyebrow .dot { color: var(--gold); }

.reveal .brandmark { display: flex; align-items: center; margin-bottom: 26px; }
.reveal .brandmark img.logo { height: 76px; width: auto;
	filter: drop-shadow(0 6px 22px rgba(0,0,0,0.45)); }
.reveal .brandmark.sm img.logo { height: 58px; }
.reveal .sub-brand { color: var(--ink-dim); font-size: 0.5em; letter-spacing: 0.24em;
	text-transform: uppercase; font-weight: 700; margin: 0 0 20px 2px; }

/* Slide chrome: brand tag bottom-left, version stamp bottom-right. */
.reveal .slide-tag {
	position: absolute; bottom: 18px; left: 24px;
	font-size: 0.42em; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--ink-dim); opacity: 0.8; margin: 0;
}
.reveal .slide-tag b { color: var(--gold); font-weight: 700; }
.reveal .version {
	position: absolute; bottom: 18px; right: 26px;
	font-size: 0.38em; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ink-dim); opacity: 0.6; margin: 0;
}
.footnote { position: absolute; bottom: 18px; right: 26px;
	font-size: 0.4em; color: var(--ink-dim); opacity: 0.7; }

/* Persistent brand mark, top-right of every content slide. */
.corner-logo {
	position: fixed; top: 24px; right: 30px; height: 76px; width: auto;
	z-index: 40; opacity: 0.95; pointer-events: none;
	filter: drop-shadow(0 3px 12px rgba(0,0,0,0.45));
	transition: opacity 0.3s ease;
}
body.corner-off .corner-logo { opacity: 0; }

/* Section divider slides. */
.section-slide { display: flex; flex-direction: column; justify-content: center;
	height: 100%; }
.section-slide .kicker {
	text-transform: uppercase; letter-spacing: 0.3em; font-weight: 700;
	font-size: 0.5em; color: var(--gold); margin-bottom: 0.8em;
}
.section-slide h2 { font-size: 2.4em; max-width: 15ch; }
.section-num {
	font-size: 0.55em; color: var(--navy-line); font-weight: 800;
	letter-spacing: 0.1em; margin-bottom: 0.2em;
}

/* Cards / grids. */
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card {
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
	border: 1px solid var(--navy-line);
	border-radius: 12px;
	padding: 22px 24px;
}
.card h3 { color: #fff; font-size: 0.92em; margin-bottom: 0.28em; }
.card p  { color: var(--ink-dim); font-size: 0.62em; line-height: 1.45; margin: 0; }
.card .ico { font-size: 1.5em; line-height: 1; margin-bottom: 0.35em; display: block; }
.card.accent-red   { border-top: 3px solid var(--red); }
.card.accent-cream { border-top: 3px solid var(--cream-soft); }
.card.accent-green { border-top: 3px solid var(--green); }
.card.accent-blue  { border-top: 3px solid var(--gold); }

/* Horizontal row card (stacked lists). */
.row-card {
	display: flex; align-items: flex-start; gap: 18px;
	padding: 15px 22px; border: 1px solid var(--navy-line); border-radius: 12px;
	border-left: 3px solid var(--gold);
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.row-card.tight { padding: 11px 20px; }
.row-card .ico { font-size: 1.35em; line-height: 1.1; flex: none; width: 1.4em; text-align: center; }
.row-card h3 { margin: 0 0 2px; font-size: 0.78em; color: #fff; }
.row-card p { margin: 0; color: var(--ink-dim); font-size: 0.56em; line-height: 1.4; }
.row-card.a-green { border-left-color: var(--green); }
.row-card.a-red   { border-left-color: var(--red); }
.row-card.a-gold  { border-left-color: var(--gold); }

/* Evidence stat cards. */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stat {
	border: 1px solid var(--navy-line); border-top: 3px solid var(--red);
	border-radius: 12px; padding: 20px 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.stat .num { font-size: 1.7em; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.stat .num em { color: var(--gold); font-style: normal; }
.stat .lbl { font-size: 0.56em; color: var(--ink); line-height: 1.42; margin-top: 12px; }
.stat .src { font-size: 0.4em; color: var(--ink-dim); opacity: 0.8;
	text-transform: uppercase; letter-spacing: 0.14em; margin-top: 12px; }

/* Clean bullet lists (score-coloured markers). */
.reveal ul.clean { list-style: none; margin: 0; padding: 0; }
.reveal ul.clean li {
	position: relative; padding-left: 1.3em; margin: 0.55em 0;
	line-height: 1.4; color: var(--ink);
}
.reveal ul.clean li::before {
	content: ""; position: absolute; left: 0; top: 0.5em;
	width: 9px; height: 9px; border-radius: 2px; background: var(--green);
}
.reveal ul.clean li.r::before { background: var(--red); }
.reveal ul.clean li.y::before { background: var(--cream-soft); }
.reveal ul.clean li.b::before { background: var(--gold); }
.reveal ul.clean li small { color: var(--ink-dim); font-size: 0.72em; }

.lead { font-size: 1.05em; color: var(--ink); max-width: 20ch; line-height: 1.3; }
.dim  { color: var(--ink-dim); }
.muted-note { color: var(--ink-dim); font-size: 0.6em; }

/* Metric chips (0–5 scoring). */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,0.04); border: 1px solid var(--navy-line);
	border-radius: 999px; padding: 7px 16px 7px 10px; font-size: 0.6em;
}
.chip .b { width: 10px; height: 10px; border-radius: 50%; }
.chip.hero { border-color: var(--green); background: rgba(26,150,65,0.18); }

/* "New" pill. */
.pill {
	display: inline-block; font-size: 0.42em; font-weight: 800;
	text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--navy); background: var(--cream); border-radius: 999px;
	padding: 3px 10px; vertical-align: middle; margin-left: 12px;
}
.pill.green { background: var(--green); color: #fff; }

/* Generic two-column layout helper. */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; }

/* Brand lockup: the "Maintainability Cloud" wordmark + spectrum joined into
   one element. The bar auto-matches the wordmark width (inline-flex column +
   stretch), and one master font-size at the use site scales the whole thing.
   Default bar is the 3-stop brand spectrum (adopted "version A"). */
.cv-lockup { display: inline-flex; flex-direction: column; align-self: flex-start;
	width: fit-content; font-size: 1.4rem; }
.cv-lockup .word {
	font-family: var(--sans); font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.24em; color: var(--ink-dim); line-height: 1;
	font-size: 1em; margin-right: -0.24em; /* cancel trailing letter-space so the bar aligns to visible text */
}
.cv-lockup .bar {
	height: 0.42em; margin-top: 0.5em; border-radius: 999px;
	background: linear-gradient(90deg, var(--red) 0%, var(--red) 26%,
		var(--cream-soft) 45%, var(--cream-soft) 62%, var(--green) 82%);
	box-shadow: 0 0 24px rgba(255,255,255,0.10);
}