/* aw-chrome.css — browser + GitHub UI chrome for animation scenes.
   Pairs with lib/js/aw-chrome.js. Dark mode uses the GitHub "dimmed" palette so the
   frame stays authentic without dropping to near-black. */

/* ── browser window ───────────────────────────────────────────────── */
.aw-br {
	display: flex;
	flex-direction: column;
	width: 100%;
	container-type: inline-size;
	border-radius: 12px;
	overflow: hidden;
	border: 1.5px solid var(--aw-br-border, #d1d9e0);
	background: var(--aw-br-canvas, #ffffff);
	box-shadow: 0 8px 22px rgba(20, 30, 60, 0.13);
}
.aw-br-bar {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex: 0 0 auto;
	padding: 0.55rem 0.8rem;
	background: var(--aw-br-toolbar, #eceef1);
	border-bottom: 1.5px solid var(--aw-br-border, #d1d9e0);
}
.aw-br-dots { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.aw-br-dot { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: #c9ced6; }
.aw-br-dot:nth-child(1) { background: #ec6a5f; }
.aw-br-dot:nth-child(2) { background: #f4bf50; }
.aw-br-dot:nth-child(3) { background: #61c454; }
.aw-br-url {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.32rem 0.75rem;
	border-radius: 999px;
	background: var(--aw-br-canvas, #fff);
	border: 1px solid var(--aw-br-border, #d1d9e0);
	font-size: 1rem;
	color: var(--aw-br-muted, #59636e);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aw-br-url b { font-weight: 600; color: var(--aw-br-fg, #1f2328); }
/* a live address bar still has to read as an address bar, not as a link */
.aw-br-url a.aw-br-link { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.aw-br-url a.aw-br-link:hover, .aw-br-url a.aw-br-link:focus-visible { text-decoration: underline; }
/* URLs linkified inside scene copy — underlined, but they keep the surrounding colour */
.aw-xlink { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.aw-xlink:hover, .aw-xlink:focus-visible { text-decoration-thickness: 2px; }
.aw-br-lock { flex: 0 0 auto; width: 0.85rem; height: 0.85rem; }
.aw-br-body { flex: 1 1 auto; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* for full-bleed lists and tables that draw their own row dividers */
.aw-br.is-flush > .aw-br-body { padding: 0; gap: 0; }

/* ── GitHub repository chrome ─────────────────────────────────────── */
.aw-gh-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	padding: 0.7rem 1.1rem 0;
	background: var(--aw-gh-header, #f6f8fa);
}
.aw-gh-mark { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; color: var(--aw-gh-mark, #1f2328); }
.aw-gh-nwo { font-size: 1.1rem; color: var(--aw-br-fg, #1f2328); }
.aw-gh-nwo b { font-weight: 600; }
.aw-gh-sep { color: var(--aw-br-muted, #59636e); }
.aw-gh-vis {
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--aw-br-border, #d1d9e0);
	font-size: 0.92rem;
	color: var(--aw-br-muted, #59636e);
}
.aw-gh-tabs {
	display: flex;
	align-items: stretch;
	gap: 0.15rem;
	flex: 0 0 auto;
	padding: 0.55rem 0.8rem 0;
	background: var(--aw-gh-header, #f6f8fa);
	border-bottom: 1.5px solid var(--aw-br-border, #d1d9e0);
	overflow: hidden;
}
.aw-gh-tab {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem 0.65rem;
	border-bottom: 2px solid transparent;
	font-size: 1rem;
	color: var(--aw-br-muted, #59636e);
	white-space: nowrap;
}
.aw-gh-tab svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
/* the tab the step is actually about */
.aw-gh-tab.is-active { color: var(--aw-br-fg, #1f2328); font-weight: 600; border-bottom-color: #fd8c73; }
.aw-gh-count {
	padding: 0.02rem 0.42rem;
	border-radius: 999px;
	background: var(--aw-gh-count, rgba(89, 99, 110, 0.14));
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--aw-br-muted, #59636e);
}
/* the pill's own translucent fill lifts the backdrop, so the count needs more than plain muted */
body.theme-dark .aw-gh-count { color: #c3ccd6; }
/* narrow frames collapse to icons, the way github.com does — but the tab the step is
   about keeps its label, since that is the whole point of showing the chrome.
   760px is the measured width the full 7-label bar needs; below that it must collapse. */
@container (max-width: 780px) {
	.aw-gh-tabs { gap: 0.1rem; padding-inline: 0.6rem; }
	.aw-gh-tab { padding-inline: 0.45rem; }
	.aw-gh-tab:not(.is-active) > span:not(.aw-gh-count) { display: none; }
	.aw-gh-tab:not(.is-active) > .aw-gh-count { display: none; }
	.aw-gh-head { padding-inline: 0.8rem; }
	.aw-gh-nwo { font-size: 1rem; }
}

/* ── shared GitHub content bits ───────────────────────────────────── */
.aw-gh-state {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.22rem 0.7rem;
	border-radius: 999px;
	font-size: 0.95rem;
	font-weight: 500;
	color: #fff;
	background: #1a7f37;
}
.aw-gh-state.is-merged { background: #8250df; }
.aw-gh-state.is-closed { background: #cf222e; }
.aw-gh-state svg { width: 0.9rem; height: 0.9rem; }
.aw-gh-branchpill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--aw-br-border, #d1d9e0);
	background: var(--aw-gh-header, #f6f8fa);
	font-size: 1rem;
	color: var(--aw-br-fg, #1f2328);
}
.aw-gh-branchpill svg { width: 1rem; height: 1rem; }

/* ── terminal window ──────────────────────────────────────────────── */
/* A shell is not a web page, so it gets terminal chrome rather than the browser frame. */
.aw-term {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	border: 1.5px solid #3a3f4b;
	background: #1b1e26;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
.aw-term-bar {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
	padding: 0.5rem 0.85rem;
	background: #252932;
	border-bottom: 1px solid #3a3f4b;
}
.aw-term-dots { display: flex; gap: 0.36rem; }
.aw-term-dot { width: 0.72rem; height: 0.72rem; border-radius: 50%; background: #4a5060; }
.aw-term-title { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 1rem; color: #9aa3b2; }
.aw-term-body { display: flex; flex-direction: column; gap: 0.22rem; padding: 1rem 1.1rem; }
.aw-term-line {
	font-family: 'Cascadia Code', 'Consolas', monospace;
	font-size: 1.06rem;
	line-height: 1.7;
	color: #e6e6ef;
	white-space: nowrap;
}
.aw-term-line.is-cmd::before { content: "PS> "; color: #57d977; }
.aw-term-line.is-sh::before { content: "$ "; color: #57d977; }
.aw-term-line.is-dim { color: #9aa3b2; }
.aw-term-line.is-ok { color: #57d977; }
.aw-term-line.is-ask { color: #ffd479; }
.aw-term-line.is-code { color: #ffd479; font-weight: 700; font-size: 1.3rem; letter-spacing: 0.2em; }

/* ── "your turn" panel ────────────────────────────────────────────── */
/* Marks the steps the learner is meant to perform on their own repository. */
.aw-turn {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	padding: 1.05rem 1.3rem;
	border-radius: 14px;
	border: 2px dashed var(--aw-turn-c, #bc4c00);
	background: color-mix(in srgb, var(--aw-turn-c, #bc4c00) 7%, transparent);
}
.aw-turn-h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aw-turn-c, #bc4c00);
}
/* Hanging indent, NOT flex: a flex container would make every inline <b> its own
   flex item and insert the gap mid-sentence. */
.aw-turn-step {
	padding-left: 1.6rem;
	text-indent: -1.6rem;
	font-size: 1.08rem;
	line-height: 1.5;
	color: var(--theme-text);
}
.aw-turn-step b { font-weight: 600; }
.aw-turn-ask {
	margin-top: 0.15rem;
	padding-top: 0.6rem;
	border-top: 1px dashed color-mix(in srgb, var(--aw-turn-c, #bc4c00) 45%, transparent);
	font-size: 1.08rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--aw-turn-c, #bc4c00);
}

/* Shown only while the learner is still on the worked example — see AW.egNote.
   Deliberately compact: it is a fallback pointer, and it sits on already-tall hands-on steps. */
.aw-eg {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.42rem 0.95rem;
	border-radius: 999px;
	border: 1.5px solid var(--theme-border, rgba(128, 128, 128, 0.3));
	background: var(--theme-card-background, #fff);
}
body.theme-dark .aw-eg { background: #2a2b34; }
.aw-eg-t { font-size: 0.98rem; color: var(--theme-text-subtle, #5b6270); }
.aw-eg-link { font-size: 0.98rem; font-weight: 600; color: var(--aw-blue, #0078d4); text-decoration: none; }
.aw-eg-link:hover { text-decoration: underline; }
body.theme-dark .aw-eg-link { color: #6fb8ff; }

/* GitHub dimmed palette — authentic, and lighter than #0d1117 */
body.theme-dark .aw-br {
	--aw-br-canvas: #22272e;
	--aw-br-toolbar: #2d333b;
	--aw-br-border: #444c56;
	--aw-br-fg: #adbac7;
	/* GitHub's own dimmed muted (#768390) only reaches 2.5:1 on this canvas — lifted to clear AA. */
	--aw-br-muted: #9aa5b1;
	--aw-gh-header: #2d333b;
	--aw-gh-mark: #ffffff;
	--aw-gh-count: rgba(118, 131, 144, 0.22);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
}
body.theme-dark .aw-br-dot { background: #444c56; }
body.theme-dark .aw-br-dot:nth-child(1) { background: #ec6a5f; }
body.theme-dark .aw-br-dot:nth-child(2) { background: #f4bf50; }
body.theme-dark .aw-br-dot:nth-child(3) { background: #61c454; }