/* Screens and code panels (inc/cc-screens.php, CUSTOM-TEMPLATE.md D12). Product screens are drawn dark in both color
   modes, like a real app window; the accent is the Branding Main color lifted for dark. Only classes cc-screen / cc-code. */
.cc-screen, .cc-code {
	--cc-scr-bg: #000; --cc-scr-card: #161616; --cc-scr-line: #2A2A2A; --cc-scr-ink: #F2F2F2; --cc-scr-muted: #8F8F8F;
	--cc-scr-acc: color-mix(in oklab, var(--color-main, #FF6B1F) 78%, #fff); --cc-scr-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--cc-scr-r: 16px;
}
.cc-screen { background: var(--cc-scr-bg); border: 1px solid var(--cc-scr-line); border-radius: var(--cc-scr-r); padding: clamp(16px, 2vw, 28px);
	color: var(--cc-scr-ink); display: grid; gap: 16px; text-align: left; min-width: 0; font-family: var(--cc-scr-mono); font-size: 13px; line-height: 1.5; }
.cc-screen * { box-sizing: border-box; }

/* Code */
.cc-code { min-width: 0; background: var(--cc-scr-card); border-radius: 12px; padding: 18px 22px; color: var(--cc-scr-ink); text-align: left; }
.cc-screen > .cc-code, .cc-scr-main > .cc-code { background: #111; }
:not(.cc-screen):not(.cc-scr-main) > .cc-code { background: var(--cc-scr-bg); border: 1px solid var(--cc-scr-line); border-radius: var(--cc-scr-r); padding: 22px 26px; }
.cc-code pre { margin: 0; padding: 0; background: none; border: 0; overflow-x: auto; white-space: pre; color: inherit; font: 400 14px/1.75 var(--cc-scr-mono); tab-size: 2; }
.cc-code code { font: inherit; color: inherit; background: none; padding: 0; display: block; }
.cc-code .cc-l { display: inline-block; min-width: 100%; min-height: 1.75em; border-radius: 4px; vertical-align: top; }
.cc-code .cc-l-hi { color: var(--cc-scr-acc); background: color-mix(in srgb, var(--color-main, #FF6B1F) 14%, transparent); box-shadow: -8px 0 0 color-mix(in srgb, var(--color-main, #FF6B1F) 14%, transparent), 8px 0 0 color-mix(in srgb, var(--color-main, #FF6B1F) 14%, transparent); }
.cc-code .cc-l-hi *:is(.cc-tk, .cc-ts, .cc-tn) { color: inherit; }
.cc-code .cc-tc { color: var(--cc-scr-muted); }
.cc-code .cc-tk { color: var(--cc-scr-acc); }
.cc-code .cc-ts { color: #C9C9C9; }
.cc-code .cc-tn { color: #FFFFFF; }
.cc-code-title { display: block; margin-bottom: 10px; color: var(--cc-scr-muted); font: 400 13px/1.4 var(--cc-scr-mono); }
.cc-code-term .cc-l-cmd { color: #fff; }
.cc-code-term .cc-l-ok { color: var(--cc-scr-acc); }
.cc-code-term .cc-l:not(.cc-l-cmd):not(.cc-l-ok):not(.cc-l-hi) { color: var(--cc-scr-muted); }

/* Window bar */
.cc-scr-bar { display: flex; justify-content: space-between; gap: 16px; align-items: center; color: var(--cc-scr-muted); padding-bottom: 12px; border-bottom: 1px solid var(--cc-scr-line); }
.cc-scr-bar > span:first-child { color: var(--cc-scr-ink); }
.cc-scr-status { display: inline-flex; align-items: center; gap: 8px; }
.cc-scr-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cc-scr-acc); }

/* Connected cards */
.cc-scr-stack { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; }
.cc-scr-stack li { flex: 1 1 0; min-width: 0; position: relative; background: var(--cc-scr-card); border-radius: 12px; padding: 16px 16px 18px; margin: 0; }
.cc-scr-stack li + li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 22px; height: 2px; background: var(--color-main, #FF6B1F); }
.cc-scr-stack b { display: block; font: 600 15px/1.3 var(--font-body, system-ui); color: #fff; }
.cc-scr-stack span { display: block; margin-top: 8px; color: var(--cc-scr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Table rows */
.cc-scr-rows { display: grid; gap: 2px; background: var(--cc-scr-card); border-radius: 12px; padding: 8px 14px; overflow-x: auto; }
.cc-scr-rows > div { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; padding: 7px 0; border-top: 1px solid var(--cc-scr-line); white-space: nowrap; }
.cc-scr-rows > div:first-child { border-top: 0; }
.cc-scr-rows .cc-scr-hd { color: var(--cc-scr-muted); }
.cc-scr-rows span { overflow: hidden; text-overflow: ellipsis; }
.cc-scr-rows .cc-scr-last { color: var(--cc-scr-acc); text-align: right; }

/* Stat cards */
.cc-scr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.cc-scr-stats > div { background: var(--cc-scr-card); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; }
.cc-scr-stats span { color: var(--cc-scr-muted); font-size: 12px; }
.cc-scr-stats b { font: 600 22px/1.1 var(--font-body, system-ui); color: #fff; white-space: nowrap; }
.cc-scr-stats em { font-style: normal; color: var(--cc-scr-acc); font-size: 12px; }

/* Bars */
.cc-scr-bars { display: grid; gap: 10px; background: var(--cc-scr-card); border-radius: 12px; padding: 14px 16px; }
.cc-scr-bars p { margin: 0 0 2px; color: var(--cc-scr-muted); }
.cc-scr-bars > div { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 4.5em; gap: 12px; align-items: center; }
.cc-scr-bars i { height: 8px; border-radius: 4px; background: #2A2A2A; overflow: hidden; display: block; }
.cc-scr-bars i > s { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--color-main, #FF6B1F); text-decoration: none; }
.cc-scr-bars b { font-weight: 500; text-align: right; color: #fff; white-space: nowrap; }

/* Side menu + main */
.cc-scr-split { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; }
.cc-scr-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.cc-scr-side { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 2px; align-content: start; font-family: var(--font-body, system-ui); }
.cc-scr-side li { margin: 0; padding: 7px 10px; border-radius: 8px; color: var(--cc-scr-muted); }
.cc-scr-side li.is-on { background: var(--cc-scr-card); color: #fff; }

/* Chat */
.cc-scr-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cc-scr-chat li { margin: 0; display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 12px; background: var(--cc-scr-card); border-radius: 10px; padding: 10px 14px; }
.cc-scr-chat b { color: var(--cc-scr-muted); font-weight: 400; }
.cc-scr-chat span { color: #fff; font-family: var(--font-body, system-ui); font-size: 14px; }

/* Label / value */
.cc-scr-kv { margin: 0; display: grid; gap: 0; background: var(--cc-scr-card); border-radius: 12px; padding: 6px 16px; }
.cc-scr-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--cc-scr-line); }
.cc-scr-kv > div:first-child { border-top: 0; }
.cc-scr-kv dt { color: var(--cc-scr-muted); }
.cc-scr-kv dd { margin: 0; color: #fff; }

@media (max-width: 767px) {
	.cc-screen { padding: 14px; gap: 12px; font-size: 12px; }
	.cc-scr-split { grid-template-columns: 1fr; }
	.cc-scr-side { display: none; }
	.cc-scr-stack { flex-direction: column; gap: 14px; }
	.cc-scr-stack li + li::before { left: 24px; top: -14px; width: 2px; height: 14px; }
	.cc-code pre { font-size: 12.5px; }
	.cc-scr-rows > div > span:nth-child(n+5):not(.cc-scr-last) { display: none; }
}

/* A filled Screen takes the place of the picture: the frame grows with it (never cropped) and drops its photo styling. */
*:is(.photo, .ph, .ct2-st-img, .ct7-ce-frame).has-screen { aspect-ratio: auto !important; height: auto !important; max-height: none !important; overflow: visible !important; background: none !important; box-shadow: none !important; }
*:is(.photo, .ph, .ct2-st-img, .ct7-ce-frame).has-screen > .cc-screen { position: static; width: 100%; }
.cc-two-doors__door.has-screen { display: flex; flex-direction: column; gap: 24px; }
.cc-two-doors__screen { display: block; position: relative; z-index: 1; }
.cc-two-doors__door.has-screen .cc-two-doors__body { position: relative; }

/* Card rows (owner, 2026-11-05: "make these all same height"): the screens in a row share the tallest one's height,
   content at the top, and the number, rule, title, text and link of every card line up; links sit at the card bottom.
   Phones stack the cards at their natural heights. */
@media (min-width: 768px) {
	body .sb-cards .c16:has(.ph.has-screen) > .c16-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; }
	body .sb-cards .c16:has(.ph.has-screen) > .c16-card > .ph { height: 100% !important; }
	body .sb-cards .c16:has(.ph.has-screen) > .c16-card > .lk { align-self: end; margin-top: 0; }
	*:is(.ph, .photo, .ct2-st-img).has-screen > .cc-screen { height: 100%; align-content: start; }
	.cc-two-doors__door.has-screen .cc-two-doors__screen { flex: 1 1 auto; display: grid; }
	.cc-two-doors__door.has-screen .cc-two-doors__screen > .cc-screen { height: 100%; align-content: start; }
}

/* Labels inside a screen are UI text, never page type: theme paragraph and list sizes do not reach in. */
.cc-screen *:is(p, li, dt, dd) { font-size: 12.5px !important; line-height: 1.45 !important; letter-spacing: 0 !important; margin-block: 0; max-width: none; font-weight: 400; }
.cc-screen .cc-scr-bars > p { color: var(--cc-scr-muted); font-family: var(--cc-scr-mono) !important; }
.cc-screen .cc-scr-chat span { font-size: 14px !important; }

/* Screens never widen their column: every part may shrink, long code scrolls inside its panel. */
*:is(.photo, .ph, .ct2-st-img, .ct7-ce-frame, .cc-two-doors__screen).has-screen, .cc-two-doors__screen, .cc-screen, .cc-screen > *, .cc-scr-main > * { min-width: 0; max-width: 100%; }
@media (min-width: 768px) and (max-width: 1180px) {
	.cc-scr-stack { flex-wrap: wrap; row-gap: 14px; }
	.cc-scr-stack li { flex: 1 1 calc(50% - 11px); }
	.cc-scr-stack li:nth-child(odd)::before { display: none; }
}