/*
 * Synainesi product screens (patterns screen-*, inc/screens.php): the brand pack's product applications
 * showcase, rebuilt in HTML and CSS. Each screen is drawn on a 1000-unit-wide design grid and
 * sized in container query units, so 1cqw is 10 design units and the whole screen scales as
 * one picture, sharp at any size.
 */

.sy-screen { margin: 0; }

.sy-ui {
	--ui-ink: #0B0F0E;
	--ui-text: #2B312F;
	--ui-muted: #666C69;
	--ui-pine: #10302A;
	--ui-green: #257247;
	container-type: inline-size;
	position: relative;
	display: flex;
	overflow: hidden;
	border: 1px solid #E3E0DA;
	border-radius: 10px;
	background: #FAFAF8;
	box-shadow: 0 34px 60px -34px rgba(11, 15, 14, 0.38);
	color: var(--ui-text);
	font-family: var(--wp--preset--font-family--sans, system-ui, sans-serif);
	line-height: 1.35;
	text-align: left;
	-webkit-user-select: none;
	user-select: none;
}
.sy-ui *, .sy-ui *::before, .sy-ui *::after { box-sizing: border-box; }
.sy-ui span { display: block; }
.sy-ui > * { font-size: 1.6cqw; }

.sy-ui-i {
	display: block;
	flex: none;
	width: 2cqw;
	height: 2cqw;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.sy-ui .sy-ui-mark { display: block; width: auto; max-width: none; height: 4cqw; }
.sy-ui-mark--light {
	aspect-ratio: 80.81 / 100;
	background: url("../brand/synainesi-mark-light.svg") center / contain no-repeat;
}

.sy-ui-dots { display: flex !important; gap: 0.7cqw; }
.sy-ui-dots i { width: 1.05cqw; height: 1.05cqw; border-radius: 50%; background: #FF5F57; }
.sy-ui-dots i:nth-child(2) { background: #FEBC2E; }
.sy-ui-dots i:nth-child(3) { background: #28C840; }

/* ---------- Shared shell: sidebar and main area ---------- */

.sy-ui-side { position: relative; display: flex !important; flex: 0 0 23.5cqw; flex-direction: column; padding: 1.6cqw 1.2cqw; background: #F2F1EE; border-right: 1px solid #E4E2DD; font-size: 1.7cqw; }
.sy-ui-brand { display: flex !important; align-items: center; gap: 1cqw; margin: 2.2cqw 0 2.8cqw 0.6cqw; color: var(--ui-ink); font-size: 2.6cqw; font-weight: 500; letter-spacing: -0.01em; }
.sy-ui-brand .sy-ui-mark { height: 4.2cqw; }
.sy-ui-nav { display: flex !important; flex-direction: column; gap: 0.3cqw; }
.sy-ui-nav__item { display: flex !important; align-items: center; gap: 1.4cqw; height: 4.7cqw; padding: 0 1.4cqw; border-radius: 0.8cqw; color: #3A403E; }
.sy-ui-nav__item.is-active { background: var(--ui-pine); color: #fff; font-weight: 500; }
.sy-ui-nav--end { margin-top: auto; padding-top: 1.2cqw; border-top: 1px solid #E3E1DB; }
.sy-ui-main { position: relative; display: flex !important; flex: 1; flex-direction: column; min-width: 0; padding: 10cqw 4cqw 0 3.9cqw; }
.sy-ui-h { margin-bottom: 1.2cqw; color: var(--ui-ink); font-size: 1.75cqw; font-weight: 600; }
.sy-ui-sub { margin-top: 1cqw; color: #4E5552; font-size: 2.1cqw; }
.sy-ui-avatar { display: grid !important; place-items: center; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #CDD1FA; color: #3341B5; font-size: 1.3cqw; font-weight: 600; }
.sy-ui-send { display: grid !important; place-items: center; width: 5.2cqw; height: 5.2cqw; border-radius: 1cqw; background: var(--ui-pine); color: #fff; }
.sy-ui-send .sy-ui-i { width: 2.2cqw; height: 2.2cqw; }

/* ---------- Desktop app: home / workspace ---------- */

.sy-ui--workspace { aspect-ratio: 1000 / 712; }
.sy-ui-user { position: absolute; top: 1.8cqw; right: 2.2cqw; display: flex !important; align-items: center; gap: 1cqw; }
.sy-ui-user__who { line-height: 1.25; }
.sy-ui-user__who span:first-child { color: var(--ui-ink); font-size: 1.6cqw; font-weight: 600; }
.sy-ui-user__who span:last-child { color: var(--ui-muted); font-size: 1.4cqw; }
.sy-ui-user > .sy-ui-i { width: 2.1cqw; height: 2.1cqw; margin-left: 1.6cqw; color: #6B716E; }
.sy-ui-greet { color: var(--ui-ink); font-family: var(--wp--preset--font-family--serif, Georgia, serif); font-size: 4cqw; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.sy-ui-ask { display: flex !important; align-items: center; justify-content: space-between; height: 7cqw; margin-top: 2.9cqw; padding: 0 0.9cqw 0 2.2cqw; border: 1px solid #E4E2DD; border-radius: 1.4cqw; background: #fff; box-shadow: 0 0.4cqw 1.2cqw -0.6cqw rgba(11, 15, 14, 0.15); color: #6A706D; font-size: 1.8cqw; }
.sy-ui-actions { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 3cqw; margin-top: 2cqw; }
.sy-ui-action { display: flex !important; flex-direction: column; justify-content: space-between; height: 11.6cqw; padding: 1.8cqw; border: 1px solid #E7E5E0; border-radius: 1.2cqw; background: #fff; font-size: 1.55cqw; line-height: 1.3; }
.sy-ui-action .sy-ui-i { width: 2.4cqw; height: 2.4cqw; color: var(--ui-pine); }
.sy-ui-lower { display: grid !important; flex: 1; grid-template-columns: 1fr 27cqw; gap: 2.6cqw; min-height: 0; margin-top: 2.5cqw; }
.sy-ui-list { border: 1px solid #E7E5E0; border-radius: 1cqw; background: #fff; }
.sy-ui-row { display: grid !important; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2cqw; height: 4.6cqw; padding: 0 1.4cqw; font-size: 1.5cqw; }
.sy-ui-row + .sy-ui-row { border-top: 1px solid #EFEDE9; }
.sy-ui-row > .sy-ui-i:first-child { color: #4D63F0; }
.sy-ui-row > .sy-ui-i:last-child { width: 1.8cqw; height: 1.8cqw; color: #9AA09D; }
.sy-ui-row__title { overflow: hidden; color: #1E2422; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sy-ui-row__meta { color: #666C69; font-size: 1.35cqw; white-space: nowrap; }
.sy-ui-protect { display: grid !important; grid-template-columns: auto 1fr; align-content: start; gap: 1.1cqw 1.4cqw; margin-top: 1.4cqw; padding: 2.2cqw; border: 1px solid #DCE6DE; border-bottom: 0; border-radius: 1.4cqw 1.4cqw 0 0; background: #EEF3EF; color: #3A403E; font-size: 1.4cqw; }
.sy-ui-protect > .sy-ui-i { width: 4.4cqw; height: 4.4cqw; color: var(--ui-pine); stroke-width: 1.5; }
.sy-ui-protect__title { align-self: center; color: #22604A; font-size: 1.9cqw; font-weight: 600; }
.sy-ui-check { display: flex !important; grid-column: 1 / -1; align-items: center; gap: 0.9cqw; }
.sy-ui-check .sy-ui-i { width: 1.6cqw; height: 1.6cqw; color: var(--ui-green); }
.sy-ui-protect__foot { grid-column: 1 / -1; margin-top: 1.4cqw; font-size: 1.5cqw; line-height: 1.45; }

/* ---------- AI work screen, with protection indicators ---------- */

.sy-ui--ai-work { aspect-ratio: 1000 / 866; flex-direction: column; background: #FBFBF9; }
.sy-ui--ai-work > * { margin-inline: 3cqw; font-size: 1.9cqw; }
.sy-ui--ai-work > .sy-ui-bar { display: flex !important; align-items: center; gap: 1.4cqw; height: 9.5cqw; margin-inline: 0; padding: 0 3cqw; border-bottom: 1px solid #ECEAE5; }
.sy-ui-bar > .sy-ui-i { width: 2.4cqw; height: 2.4cqw; color: #3A403E; }
.sy-ui-bar__title { color: var(--ui-ink); font-size: 2.2cqw; font-weight: 600; }
.sy-ui-chips { display: flex !important; align-items: center; gap: 1.2cqw; margin-left: auto; }
.sy-ui-chips > .sy-ui-i { width: 2.4cqw; height: 2.4cqw; color: #6B716E; }
.sy-ui-chip { display: inline-flex !important; align-items: center; gap: 1cqw; height: 5.4cqw; padding: 0 1.8cqw; border: 1px solid #E2E0DB; border-radius: 1.2cqw; background: #fff; font-size: 1.65cqw; white-space: nowrap; }
.sy-ui-chip .sy-ui-i { width: 2.1cqw; height: 2.1cqw; }
.sy-ui-chip--ok .sy-ui-i { color: var(--ui-green); }
.sy-ui-bubble { align-self: flex-end; margin-top: 4cqw; padding: 2.2cqw 2.6cqw; border-radius: 1.8cqw; background: #EFEFEC; }
.sy-ui-answer { display: flex !important; gap: 5.4cqw; margin-top: 5.5cqw; }
.sy-ui-answer .sy-ui-mark { align-self: flex-start; height: 4.3cqw; margin-top: 0.2cqw; }
.sy-ui-answer__body { display: flex !important; flex-direction: column; gap: 1.5cqw; line-height: 1.5; }
.sy-ui-risk { display: grid !important; grid-template-columns: 2.6cqw 1fr; }
.sy-ui-risk strong { color: var(--ui-ink); font-weight: 600; }
.sy-ui--ai-work > .sy-ui-refs { display: flex !important; gap: 1.6cqw; margin: 4cqw 3cqw 0 12.6cqw; }
.sy-ui-chip--end { margin-left: auto; }
.sy-ui-follow { display: flex !important; align-items: center; gap: 1.6cqw; height: 9cqw; margin-top: auto; padding: 0 1cqw 0 2.4cqw; border: 1px solid #E2E0DB; border-radius: 1.6cqw; background: #fff; color: #6A706D; }
.sy-ui-follow > span:first-child { flex: 1; }
.sy-ui-follow > .sy-ui-i { width: 2.4cqw; height: 2.4cqw; color: #6B716E; }
.sy-ui-follow .sy-ui-send { width: 6cqw; height: 6cqw; background: #B4BAC4; }
.sy-ui--ai-work > .sy-ui-foot { display: flex !important; justify-content: space-between; margin-top: 2.6cqw; margin-bottom: 3cqw; color: #646A67; font-size: 1.45cqw; }
.sy-ui-foot span:first-child { letter-spacing: 0.26em; text-transform: uppercase; }

/* ---------- Cloud control plane: admin / governance ---------- */

.sy-ui--cloud-admin { aspect-ratio: 1000 / 560; background: #F7F6F3; }
.sy-ui-side--dark { flex-basis: 21.7cqw; padding: 1.6cqw 0; border-right: 0; background: linear-gradient(180deg, #0F2723, #07110F); color: rgba(255, 255, 255, 0.82); }
.sy-ui-side--dark .sy-ui-dots { padding-left: 1.6cqw; }
.sy-ui-side--dark .sy-ui-brand { margin: 2cqw 0 0 2.2cqw; color: #fff; font-size: 2.5cqw; }
.sy-ui-side--dark .sy-ui-mark--light { height: 3.6cqw; }
.sy-ui-console { margin: 2.2cqw 0 1.6cqw 2.2cqw; color: rgba(255, 255, 255, 0.9); font-size: 1.75cqw; }
.sy-ui-side--dark .sy-ui-nav { gap: 0.2cqw; }
.sy-ui-side--dark .sy-ui-nav__item { height: 4.8cqw; padding: 0 2.2cqw; border-radius: 0; color: rgba(255, 255, 255, 0.8); font-size: 1.65cqw; }
.sy-ui-side--dark .sy-ui-nav__item.is-active { background: rgba(143, 168, 160, 0.16); color: #fff; }
.sy-ui--cloud-admin .sy-ui-main { padding: 2.4cqw 2.4cqw 2.4cqw 3.3cqw; }
.sy-ui-top { display: flex !important; align-items: center; gap: 1.4cqw; }
.sy-ui-burger { display: grid !important; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: 0.8cqw; background: #ECEBE7; color: #3A403E; }
.sy-ui-org { display: flex !important; align-items: center; gap: 1.4cqw; height: 3.8cqw; margin-left: auto; padding: 0 1.4cqw; border: 1px solid #E1DFDA; border-radius: 0.9cqw; background: #fff; font-size: 1.5cqw; }
.sy-ui-org .sy-ui-i { width: 1.6cqw; height: 1.6cqw; color: #6B716E; }
.sy-ui-avatar--blue { background: linear-gradient(145deg, #5B77FF, #3346D8); color: #fff; }
.sy-ui-title { margin-top: 1.4cqw; color: var(--ui-ink); font-size: 2.4cqw; font-weight: 500; }
.sy-ui--cloud-admin .sy-ui-sub { margin-top: 0.6cqw; color: var(--ui-muted); font-size: 1.6cqw; }
.sy-ui-kpis { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 1.7cqw; margin-top: 2.4cqw; }
.sy-ui-kpi { display: flex !important; flex-direction: column; gap: 0.5cqw; padding: 1.6cqw 1.8cqw; border: 1px solid #E7E5E0; border-radius: 1.2cqw; background: #fff; color: var(--ui-muted); font-size: 1.45cqw; }
.sy-ui-kpi__value { color: var(--ui-ink); font-size: 2.9cqw; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.sy-ui-kpi__delta { display: flex !important; align-items: center; gap: 0.5cqw; color: var(--ui-green); font-size: 1.3cqw; }
.sy-ui-kpi__delta .sy-ui-i { width: 1.4cqw; height: 1.4cqw; }
.sy-ui-panels { display: grid !important; flex: 1; grid-template-columns: 33fr 38fr; gap: 2cqw; min-height: 0; margin-top: 1.8cqw; }
.sy-ui-card { display: flex !important; flex-direction: column; min-height: 0; padding: 1.8cqw; border: 1px solid #E7E5E0; border-radius: 1.2cqw; background: #fff; }
.sy-ui-card .sy-ui-h { margin-bottom: 0.8cqw; font-size: 1.65cqw; font-weight: 500; }
.sy-ui-control { display: grid !important; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.2cqw; padding: 0.6cqw 0; border-top: 1px solid #F0EEEA; font-size: 1.45cqw; }
.sy-ui-control__icon { display: grid !important; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 0.8cqw; background: #F2F1ED; color: #3A403E; }
.sy-ui-control__icon .sy-ui-i { width: 1.8cqw; height: 1.8cqw; }
.sy-ui-pill { display: inline-flex !important; align-items: center; gap: 0.6cqw; padding: 0.5cqw 1cqw; border-radius: 99cqw; background: #E8F4EC; color: #236D47; font-size: 1.25cqw; }
.sy-ui-pill .sy-ui-i { width: 1.4cqw; height: 1.4cqw; color: var(--ui-green); }
.sy-ui-control > .sy-ui-i { width: 1.6cqw; height: 1.6cqw; color: #A0A5A3; }
.sy-ui-chart { display: flex !important; flex: 1; align-items: flex-end; justify-content: space-around; gap: 2cqw; min-height: 0; padding: 1cqw 2cqw 0; border-bottom: 1px solid #E7E5E0; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), #F0EEEA calc(25% - 1px) 25%); }
.sy-ui-chart__bar { width: 3.2cqw; border-radius: 0.4cqw 0.4cqw 0 0; }
.sy-ui-c-product { background: #858CF4; }
.sy-ui-c-engineering { background: #B1B5F8; }
.sy-ui-c-legal { background: #3D8C6C; }
.sy-ui-c-finance { background: #0F2D26; }
.sy-ui-c-other { background: #3F50E6; }
.sy-ui-legend { display: flex !important; flex-wrap: nowrap; justify-content: center; gap: 1.1cqw; margin-top: 1.2cqw; color: var(--ui-muted); font-size: 1.1cqw; white-space: nowrap; }
.sy-ui-legend span { display: inline-flex !important; align-items: center; gap: 0.5cqw; }
.sy-ui-legend i { width: 1cqw; height: 1cqw; border-radius: 50%; }

/* ---------- Device frames for the cloud + desktop diagram ---------- */

.sy-frame-laptop, .sy-frame-monitor { position: relative; padding-bottom: 1.1rem; }
.sy-frame-laptop .sy-ui, .sy-frame-monitor .sy-ui { border: 6px solid #1A1F1E; box-shadow: 0 28px 50px -30px rgba(11, 15, 14, 0.5); }
.sy-frame-laptop { padding-inline: 5.5%; }
.sy-frame-laptop::after { content: ""; position: absolute; right: 0; bottom: 0.35rem; left: 0; height: 0.75rem; border-radius: 0 0 14px 14px; background: linear-gradient(#D6D8D7, #A9ADAC); box-shadow: 0 10px 18px -10px rgba(11, 15, 14, 0.5); }
/* Both devices stand on the same line. For a column W wide, with 6 px bezels, the laptop's
 * screen is (0.89W - 12) x 0.712 + 12 tall and the monitor's (W - 12) x 0.560 + 12: pad the
 * monitor by the difference, 7.37% of W less 1.8 px. */
@media (min-width: 782px) {
	.sy-duo .sy-frame-monitor { padding-top: calc(7.37% - 1.8px); }
}
.sy-frame-monitor::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 22%; height: 1.1rem; background: linear-gradient(#2A302F, #151918); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); transform: translateX(-50%); }