/* ==========================================================================
   RimSift brand layer
   Elementor's Site Settings (global colours and fonts) remain the main
   source of styling. These variables match them, for use in HTML widgets
   and custom CSS. Helper classes go in Elementor's Advanced > CSS Classes.
   ========================================================================== */

:root {
	/* Dark theme: site default */
	--rs-surface-000: #14161a; /* page background */
	--rs-surface-100: #1c1f25; /* cards and panels */
	--rs-surface-200: #252931; /* blocks inside a panel, table headers */
	--rs-line:        #343942; /* decorative hairlines */
	--rs-line-strong: #717988; /* meaningful borders, diagram tracks */
	--rs-ink:         #f4f2ed; /* headings and body */
	--rs-ink-muted:   #a9afba; /* sub-headlines, supporting text */
	--rs-ink-subtle:  #858c97; /* captions (not on surface-200) */
	--rs-signal:      #f5b043; /* amber: once per screen */
	--rs-signal-dim:  #3a2c14; /* quote and callout background */
	--rs-on-signal:   #14161a; /* text on amber */
	--rs-pass:        #5fbf8a; /* Allowed, always with the word */
	--rs-deny:        #ef6a5f; /* Blocked, always with the word */
	--rs-focus:       #f5b043;

	--rs-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--rs-font-sans:    "IBM Plex Sans", system-ui, sans-serif;
	--rs-font-mono:    "IBM Plex Mono", ui-monospace, monospace;

	--rs-radius-sm: 4px;
	--rs-radius-md: 8px;
	--rs-radius-lg: 14px;
	--rs-shadow-float: 0 8px 24px rgba(0, 0, 0, .45);
}

/* Light theme, for any section or page given the class rs-light */
.rs-light {
	--rs-surface-000: #fbfaf7;
	--rs-surface-100: #ffffff;
	--rs-surface-200: #f2f0ea;
	--rs-line:        #e4e0d6;
	--rs-line-strong: #8d8676;
	--rs-ink:         #191b20;
	--rs-ink-muted:   #575d68;
	--rs-ink-subtle:  #6b7280;
	--rs-signal:      #9a5c04;
	--rs-signal-dim:  #f8ecd3;
	--rs-on-signal:   #ffffff;
	--rs-pass:        #17794d;
	--rs-deny:        #b3271b;
	--rs-focus:       #8a5406;
	background: var(--rs-surface-000);
	color: var(--rs-ink);
}

/* --- Base ---------------------------------------------------------------- */
body {
	background: var(--rs-surface-000);
	color: var(--rs-ink);
	font-family: var(--rs-font-sans);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--rs-signal); color: var(--rs-on-signal); }

:focus-visible {
	outline: 2px solid var(--rs-focus);
	outline-offset: 2px;
}

/* --- Type helpers -------------------------------------------------------- */
.rs-eyebrow,
.rs-eyebrow .elementor-heading-title {
	font-family: var(--rs-font-mono);
	font-size: 11px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rs-ink-muted);
}
.rs-mono  { font-family: var(--rs-font-mono); font-size: 14px; }
.rs-signal, .rs-signal .elementor-heading-title { color: var(--rs-signal); }
.rs-muted  { color: var(--rs-ink-muted); }
/* One amber word inside a heading: <span class="rs-hl">rim</span> */
.rs-hl { color: var(--rs-signal); }

/* --- Surfaces ------------------------------------------------------------ */
.rs-panel {
	background: var(--rs-surface-100);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-md);
}
.rs-card {
	background: var(--rs-surface-100);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	transition: border-color .15s ease;
}
.rs-card:hover { border-color: var(--rs-line-strong); }
.rs-callout {
	background: var(--rs-signal-dim);
	border-radius: var(--rs-radius-md);
}

/* The rim: a vertical amber bar for diagrams and section accents */
.rs-rim {
	width: 3px;
	min-height: 48px;
	background: var(--rs-signal);
}

/* --- Verdict tags -------------------------------------------------------- */
/* <span class="rs-verdict rs-verdict--allowed">Allowed</span> */
.rs-verdict {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--rs-radius-sm);
	background: var(--rs-surface-200);
	font-family: var(--rs-font-mono);
	font-size: 11px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rs-ink);
	white-space: nowrap;
}
.rs-verdict::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.rs-verdict--allowed::before  { background: var(--rs-pass); }
.rs-verdict--blocked::before  { background: var(--rs-deny); }
.rs-verdict--approval::before { background: var(--rs-signal); }

/* --- Mock console screens (graphics G4 to G10) --------------------------- */
.rs-screen {
	background: var(--rs-surface-100);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-lg);
	overflow: hidden;
	font-family: var(--rs-font-sans);
	font-size: 14px;
	color: var(--rs-ink);
}
.rs-screen__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--rs-line);
	background: var(--rs-surface-200);
}
.rs-screen__title { font-weight: 600; }
.rs-screen__table { width: 100%; border-collapse: collapse; }
.rs-screen__table th {
	text-align: left;
	padding: 8px 16px;
	font-family: var(--rs-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--rs-ink-muted);
	border-bottom: 1px solid var(--rs-line);
}
.rs-screen__table td {
	padding: 10px 16px;
	border-bottom: 1px solid var(--rs-line);
	vertical-align: middle;
}
.rs-screen__table tr:last-child td { border-bottom: 0; }
.rs-screen__table code {
	font-family: var(--rs-font-mono);
	font-size: 13px;
	color: var(--rs-ink);
	background: none;
	padding: 0;
}
/* The one row that matters: amber outline */
.rs-screen__table tr.is-highlight td {
	box-shadow: inset 0 1px 0 var(--rs-signal), inset 0 -1px 0 var(--rs-signal);
}
.rs-screen__table tr.is-highlight td:first-child { box-shadow: inset 1px 1px 0 var(--rs-signal), inset 0 -1px 0 var(--rs-signal); }
.rs-screen__table tr.is-highlight td:last-child  { box-shadow: inset -1px 1px 0 var(--rs-signal), inset 0 -1px 0 var(--rs-signal); }
/* Required caption under every mock screen */
.rs-illustrative {
	margin-top: 8px;
	font-size: 13px;
	line-height: 18px;
	color: var(--rs-ink-subtle);
}

/* --- Elementor Pro forms ------------------------------------------------- */
.elementor-form .elementor-field-group .elementor-field-textual,
.elementor-form .elementor-field-group select {
	background: var(--rs-surface-100);
	border: 1px solid var(--rs-line-strong);
	border-radius: var(--rs-radius-md);
	color: var(--rs-ink);
	font-family: var(--rs-font-sans);
}
.elementor-form .elementor-field-textual::placeholder { color: var(--rs-ink-subtle); }
.elementor-form .elementor-field-textual:focus,
.elementor-form select:focus {
	border-color: var(--rs-focus);
	box-shadow: 0 0 0 2px var(--rs-surface-000), 0 0 0 4px var(--rs-focus);
}
.elementor-form .elementor-field-label { color: var(--rs-ink); font-weight: 500; }
.elementor-message.elementor-message-danger { color: var(--rs-deny); }
.elementor-message.elementor-message-success { color: var(--rs-pass); }
.elementor-form .elementor-field-type-upload input[type="file"] { color: var(--rs-ink-muted); }

/* --- Motion -------------------------------------------------------------- */
/* Diagrams that draw in once when scrolled into view: add class rs-draw */
.rs-js .rs-draw {
	clip-path: inset(-24px 100% -24px 0);
	transition: clip-path .9s ease-out;
}
.rs-js .rs-draw.is-visible { clip-path: inset(-24px -24px -24px -24px); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.rs-draw { clip-path: none; }
	.rs-anim-packet { display: none; }
}