/* Indarung is not served site-wide: only aw-submit-page and aw-mentors-page carry it,
   each with its own copy. This module ships its own too.

   ⚠️⚠️ THE FILE IS A PERSONAL-USE TRIAL AND IT WATERMARKS TEN CHARACTERS. Indarung-Personal.otf
   does not merely lack these glyphs: it draws a tiny "PERSONAL USE TRIAL" box in their place.
   A real letter in this font is 22 drawing operations; every one of these is 211 or 212:

       U+0022 "    U+0023 #    U+0026 &    U+0027 '    U+0040 @
       U+005F _    U+2018 '    U+2019 '    U+201C "    U+201D "

   A studio posted "Senior/Lead Gameplay Animator - 3C & FPS" and the board drew the watermark
   where the ampersand belongs (Harvey, 14 Oct 2026, with a screenshot). Only the apostrophe and
   the curly quotes had been excluded before, so the other seven were waiting to happen; an
   ampersand in a job title is ordinary ("R&D", "Rigging & Animation").

   Every watermarked codepoint is excluded below so the browser falls back per character.
   ⚠️ The fallback is LM Pro, the site's own face, NOT ui-sans-serif: a system font in the
   middle of a display title is as noticeable as the watermark was.

   ⚠️ THIS IS A PATCH OVER A LICENCE PROBLEM, NOT A FIX. The trial is doing exactly what it is
   designed to do. Buying the licence removes the watermark; until then every new character the
   designer decides to watermark will appear on the board, and the same file is shipped by
   aw-submit-page, aw-mentors-page, aw-home-v2 and aw-account-v2 with their own @font-face. */
@font-face {
	font-family: 'Indarung';
	src: url('Indarung-Personal.otf') format('opentype');
	font-weight: 400;
	font-display: swap;
	unicode-range: U+0000-0021, U+0024-0025, U+0028-003F, U+0041-005E, U+0060-2017,
	               U+201A-201B, U+201E-10FFFF;
}

/* Animworks Opportunities.
 * Every value is the handoff's own ("opportunities-handoff", 13 Oct 2026).
 * Type follows the site rule, not the handoff's font block: Indarung for titles,
 * LM Pro for everything else. LM Pro is already served site-wide (aliased as Inter
 * and Lato in wp-content/uploads/aw-fonts), so no @font-face is declared here. */

.aw-opps {
	--page: #111111;
	--s1: #141414;
	--s2: #161616;
	--s3: #181818;
	--s4: #1A1A1A;
	--s5: #1C1C1C;
	--rule: #2A2A2A;
	--rule-2: #222222;
	--line: #3A3A3A;
	--ink: #F2F0EA;
	--ink-2: #C9C7C1;
	--ink-3: #9A9893;
	--ink-4: #8B8880;
	--gold: #E4AC01;
	--gold-hi: #FFC64A;
	--gold-link: #F5BD16;
	--gold-field: #1F1A0E;
	--gold-tint: #2A2213;
	--gold-rule: #3A3220;
	--teal: #167A7A;
	--teal-hi: #1B8A8A;
	--teal-ink: #2BA3A3;
	--teal-tint: #12332F;
	--mint: #2EC4A5;
	--red: #E24B6E;
	--banner: #2B2463;
	--banner-rule: #453C8F;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--display: 'Indarung', 'LM Pro', 'LEMON MILK Pro', ui-sans-serif, system-ui, sans-serif;
	--text: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
}

/* ---------------------------------------------------------------- main menu
 * The handoff: "Opportunities sits second in the nav, active state amber with a
 * 2px amber underline and a small New pill."
 * ⚠️ Literal values, not var(): the tokens live on .aw-opps and the nav is outside it,
 * so every var() here resolved to nothing and the theme's own colour and font won.
 * ⚠️ The selectors are deliberately long. WoodMart styles its nav links with higher
 * specificity than a single class, so a short selector silently loses. */

.whb-main-header li.aw-menu-opportunities > a,
.main-nav li.aw-menu-opportunities > a,
.site-header li.aw-menu-opportunities > a,
li.aw-menu-opportunities > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #F5BD16;
	white-space: nowrap;
	transition: color 120ms;
}

.whb-main-header li.aw-menu-opportunities > a:hover,
.main-nav li.aw-menu-opportunities > a:hover,
.site-header li.aw-menu-opportunities > a:hover,
li.aw-menu-opportunities > a:hover { color: #FFC64A; }

/* WoodMart wraps the label in .nav-link-text and colours that, not the anchor. */
.whb-main-header li.aw-menu-opportunities > a .nav-link-text,
li.aw-menu-opportunities > a .nav-link-text { color: inherit; font: inherit; letter-spacing: inherit; }
.whb-main-header li.aw-menu-opportunities > a .nav-link-text::after { display: none; }

/* The New pill, drawn after the label rather than put in the menu title, so the title
   stays plain text for screen readers and for the mobile menu. */
.whb-main-header li.aw-menu-opportunities > a::after,
.main-nav li.aw-menu-opportunities > a::after,
li.aw-menu-opportunities > a::after {
	content: 'New';
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 7px;
	border-radius: 999px;
	background: #2A2213;
	border: 1px solid #3A3220;
	color: #F5BD16;
	font-family: 'LM Pro', ui-sans-serif, system-ui, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

/* The active underline, inset so it sits on the nav's own baseline. */
.whb-main-header li.aw-menu-opportunities.current-menu-item > a,
.main-nav li.aw-menu-opportunities.current-menu-item > a,
li.aw-menu-opportunities.current-menu-item > a { box-shadow: inset 0 -2px 0 #E4AC01; }

/* ------------------------------------------------------------------- page */

.aw-opps {
	background: var(--page);
	color: var(--ink-2);
	font-family: var(--text);
	-webkit-font-smoothing: antialiased;
}
.aw-opps *, .aw-opps *::before, .aw-opps *::after { box-sizing: border-box; }
.aw-opps a { color: var(--gold-link); text-decoration: none; }
.aw-opps a:hover { color: var(--gold-hi); }
.aw-opps :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
/* ⚠️ !important, as aw-mentors-page already does for the same reason: WoodMart sets the
   heading face with higher specificity than any class we can reasonably write here. */
.aw-opps h1, .aw-opps h2, .aw-opps h3 {
	margin: 0;
	font-family: var(--display) !important;
	font-weight: 400;
	text-transform: uppercase;
}

/* ⚠️ The page runs the full width of the top bar, and starts level with it.
 * MEASURED, not guessed: WoodMart's own container is max-width 1520px with 15px of side
 * padding, so the header's first item ("Browse categories") sits at x=28 on a 1545 viewport
 * and its last at x=1518. Matching those two numbers is the whole job, so the wrap repeats
 * the theme's container exactly rather than inventing a width of its own.
 * Harvey, 13 Oct 2026: the page must "cover the same width as the main top bar", and the gap
 * at the top must go "so it's connected to the top of the page".
 * The design's own 1200px is NOT used here: per the standing rule, a design page runs the
 * full menu width and the components keep the handoff's sizes. */
.aw-opps__wrap { max-width: 1520px; margin: 0 auto; padding: 0 15px; }

/* The theme pads <main> by 40px top and caps it at 1520px, which is what pushed the page in
 * and down. Zeroed only on our own pages, by body class, so no other page moves.
 * `main` is a CSS grid here (wd-grid-g), so our page also has to claim the whole row. */
body.aw-opps-body #main-content.container,
body.aw-opps-body main.wd-content-layout,
body.aw-opps-body .wd-page-content.main-page-wrapper {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
body.aw-opps-body #main-content > .aw-opps,
body.aw-opps-body main > .aw-opps { grid-column: 1 / -1; width: 100%; min-width: 0; }
/* The theme's bottom padding is replaced by our own, so the footer does not sit on the content. */
body.aw-opps-body main.wd-content-layout { padding-bottom: 0 !important; }
.aw-opps { padding-bottom: 96px; }

/* Signed-out and no-profile banner: full width, top of the hero card. */
.aw-opps__banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 14px 20px;
	border-radius: 12px;
	background: var(--banner);
	border: 1px solid var(--banner-rule);
	color: #FFFFFF;
	margin: 24px 0;
}
.aw-opps__banner p { margin: 0; flex: 1 1 260px; font-size: 13.5px; line-height: 1.6; }

.aw-opps__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.aw-opps h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; color: var(--ink); margin: 10px 0 12px; }
.aw-opps__intro { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }

/* Buttons */
.aw-opps__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border-radius: 6px;
	border: 1px solid transparent;
	font-family: var(--text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms, border-color 120ms, color 120ms;
}
.aw-opps a.aw-opps__btn--gold, .aw-opps__btn--gold { background: var(--gold); color: #141414; }
.aw-opps a.aw-opps__btn--gold:hover, .aw-opps__btn--gold:hover { background: var(--gold-hi); color: #141414; }
.aw-opps a.aw-opps__btn--line, .aw-opps__btn--line { background: transparent; border-color: var(--line); color: var(--ink); }
.aw-opps__btn--line:hover { border-color: var(--gold); color: var(--ink); }
.aw-opps__btn--teal { background: var(--teal); color: #FFFFFF; }
.aw-opps__btn--teal:hover { background: var(--teal-hi); }

/* Stats strip */
.aw-opps__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
	gap: 12px;
	margin: 24px 0;
}
.aw-opps__stat {
	padding: 16px;
	border-radius: 12px;
	background: var(--s3);
	border: 1px solid var(--rule);
}
.aw-opps__stat b { display: block; font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.aw-opps__stat span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }

/* Role cards */
.aw-opps__group { margin: 32px 0 0; }
.aw-opps__group h2 { font-size: 15px; color: var(--ink); letter-spacing: 0.04em; }
.aw-opps__group p { margin: 6px 0 14px; font-size: 13px; color: var(--ink-3); }

.aw-opps__list { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }

.aw-opps__card {
	display: flex;
	gap: 16px;
	padding: 18px;
	border-radius: 12px;
	background: var(--s3);
	border: 1px solid var(--rule);
	min-width: 0;
	transition: border-color 120ms;
}
.aw-opps__card:hover { border-color: var(--line); }
.aw-opps__card--stale { border-style: dashed; }

.aw-opps__tile {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: var(--s5);
	border: 1px solid var(--rule);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink-2);
	letter-spacing: 0.02em;
}

.aw-opps__body { min-width: 0; flex: 1; }
.aw-opps a.aw-opps__title, .aw-opps__title { display: block; font-size: 17px; font-weight: 700; color: var(--ink); font-family: var(--text); text-transform: none; line-height: 1.35; }
.aw-opps a.aw-opps__title:hover { color: var(--gold-link); }
.aw-opps__postedas { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-4); }
.aw-opps__meta { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.aw-opps__reach { margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.aw-opps__why { margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.aw-opps__why b { color: var(--ink); font-weight: 700; }

/* Chips and tags */
.aw-opps__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aw-opps__chip {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	background: var(--s5);
	border: 1px solid var(--rule);
	color: var(--ink-2);
}
.aw-opps__tag {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.aw-opps__tag--new { background: #10302A; border: 1px solid #1F5A4E; color: var(--mint); }
.aw-opps__tag--strong { background: var(--gold-tint); border: 1px solid var(--gold-rule); color: var(--gold-link); }
.aw-opps__tag--good { background: var(--teal-tint); border: 1px solid #1F4F4B; color: var(--teal-ink); }
.aw-opps__tag--recheck { background: transparent; border: 1px dashed var(--line); color: var(--ink-4); }

/* Discipline and sector chip colours, exactly as the handoff lists them. */
.aw-opps__chip[data-k="Technical animation"] { background: #12332F; color: #2BA3A3; border-color: #1F4F4B; }
.aw-opps__chip[data-k="Cinematics"] { background: #3A1820; color: #F07A95; border-color: #5A2633; }
.aw-opps__chip[data-k="Character acting and performance"] { background: #10302A; color: #2EC4A5; border-color: #1F5A4E; }
.aw-opps__chip[data-k="Rigging"] { background: #14263A; color: #7FB2E5; border-color: #24405E; }
.aw-opps__chip[data-k="Facial"] { background: #35231A; color: #F2A57E; border-color: #5A3A2A; }
.aw-opps__chip[data-k="Creature"],
.aw-opps__chip[data-k="Motion capture editing"],
.aw-opps__chip[data-k="Games"] { background: #221D38; color: #B3A6F5; border-color: #3A3260; }
.aw-opps__chip[data-k="Feature film"] { background: #35231A; color: #F2A57E; border-color: #5A3A2A; }

/* An honest empty state, as in aw-account-v2: a panel with nothing true to say says so. */
.aw-opps__empty {
	padding: 22px;
	border-radius: 12px;
	background: var(--s2);
	border: 1px dashed var(--line);
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-3);
}

/* Anything drawn from figures we cannot yet support is marked, and must never be
   promoted to live in this state. */
.aw-opps__sample {
	position: relative;
	border: 1px dashed var(--gold-rule);
	background: var(--gold-field);
	border-radius: 12px;
	padding: 18px;
}
.aw-opps__sample::before {
	content: 'Sample data, not real';
	position: absolute;
	top: -9px;
	left: 14px;
	padding: 0 8px;
	background: var(--page);
	color: var(--gold-link);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

@media (max-width: 520px) {
	.aw-opps__card { flex-direction: column; }
	.aw-opps__wrap { padding: 0 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.aw-opps *, .aw-opps *::before, .aw-opps *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------- forms: six questions */

.aw-opps__wrap--narrow { max-width: 760px; }

.aw-opps__progress { display: flex; align-items: center; gap: 12px; margin: 20px 0 8px; }
.aw-opps__progress-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--rule-2); overflow: hidden; }
.aw-opps__progress-bar > span { display: block; height: 100%; background: var(--gold); transition: width 240ms var(--ease); }
.aw-opps__progress-label { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); }

.aw-opps__form { display: flex; flex-direction: column; gap: 18px; margin: 20px 0 0; }

.aw-opps__q { border: 1px solid var(--rule); border-radius: 12px; background: var(--s3); padding: 18px; margin: 0; }
.aw-opps__q legend { padding: 0 6px; font-size: 14px; font-weight: 700; color: var(--ink); }
/* Q2 is the most valuable field and the easiest to skip, so it is the one with a colour. */
.aw-opps__q--gold { background: var(--gold-field); border-color: var(--gold-rule); }
.aw-opps__hint { margin: 8px 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.aw-opps__label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 8px; }

.aw-opps__picks { display: flex; flex-wrap: wrap; gap: 8px; }
/* The native control stays in the accessibility tree and drives the visual state. */
.aw-opps__pick { position: relative; display: inline-flex; }
.aw-opps__pick input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aw-opps__pick span {
	display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
	border-radius: 999px; border: 1px solid var(--rule); background: var(--s5);
	color: var(--ink-2); font-size: 13px; font-weight: 500; transition: border-color 120ms, background 120ms, color 120ms;
}
.aw-opps__pick input:checked + span { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-link); font-weight: 700; }
.aw-opps__pick input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.aw-opps__pick:hover span { border-color: var(--line); }

.aw-opps textarea, .aw-opps select, .aw-opps input[type="url"], .aw-opps input[type="text"] {
	width: 100%; background: #0F0F0F; border: 1px solid var(--line); border-radius: 6px;
	color: var(--ink); padding: 12px 14px; font-family: var(--text); font-size: 13.5px;
	line-height: 1.6; outline: none; transition: border-color 120ms;
}
.aw-opps select { height: 44px; padding: 0 14px; }
/* ⚠️ !important IS NOT OPTIONAL HERE. Tutor LMS ships
       select, .tutor-form-select, .tutor-select, select option { color: #333333 !important }
   site-wide, and an !important type selector beats any class rule we write. The result was
   #333 text on a #242424 field: "United Kingdom" looked greyed out and unset (Harvey, 14 Oct
   2026). The options need it too, or the open dropdown is black on black.
   ⚠️ Scoped to .aw-opps on purpose. Every select on anim.works has this, not just ours, but
   undoing a plugin's global rule is a site-wide decision and some light-background pages may
   be relying on it. */
.aw-opps select,
.aw-opps select option { color: var(--ink) !important; background-color: #0F0F0F !important; }
.aw-opps textarea:focus, .aw-opps select:focus, .aw-opps input:focus { border-color: var(--gold); }

.aw-opps__consent { border: 1px solid var(--rule); border-radius: 12px; background: var(--s2); padding: 16px; }
.aw-opps__consent label { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; line-height: 1.6; color: var(--ink-2); cursor: pointer; }
.aw-opps__consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--gold); }
.aw-opps__consent b { color: var(--ink); }

.aw-opps__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.aw-opps__saved {
	margin: 16px 0 0; padding: 12px 16px; border-radius: 8px;
	background: #10302A; border: 1px solid #1F5A4E; color: var(--mint);
	font-size: 13px; font-weight: 700;
}
.aw-opps__error { margin: 8px 0 0; font-size: 12.5px; color: var(--red); }

.aw-opps__reel { margin-top: 12px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 16 / 9; background: #000; }
.aw-opps__reel iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================== six questions (v2)
 * Values from "profile-questions-handoff" Part A. */

.aw-qz { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; padding: 24px 0 64px; }
.aw-qz__main { flex: 1 1 560px; min-width: 0; }
.aw-qz__side { flex: 1 1 300px; max-width: 380px; min-width: 0; position: sticky; top: 24px; }
@media (max-width: 860px) { .aw-qz__side { position: static; max-width: none; order: 2; } }

.aw-qz__crumb { margin: 0 0 10px; font-size: 13px; }
.aw-qz h1 { font-size: clamp(28px, 4.6vw, 40px); line-height: 1.05; color: var(--ink); margin-bottom: 10px; }

.aw-qz__bar { display: flex; gap: 6px; list-style: none; margin: 22px 0; padding: 0; }
.aw-qz__bar li { flex: 1; }
.aw-qz__seg { display: block; width: 100%; height: 6px; border: 0; padding: 0; border-radius: 999px; background: var(--rule); cursor: pointer; transition: background 160ms var(--ease); }
.aw-qz__seg.is-done { background: var(--gold); }
.aw-qz__seg.is-here { background: var(--gold-link); box-shadow: 0 0 0 3px rgba(245, 189, 22, 0.18); }

.aw-qz__card { border: 1px solid var(--rule); border-radius: 14px; background: var(--s3); padding: 22px; margin: 0 0 16px; }
.aw-qz__card--gold { background: var(--gold-field); border-color: var(--gold-rule); }
.aw-qz__card--teal { background: var(--teal-tint); border-color: #1F4F4B; }
.aw-qz__card h2 { font-size: clamp(19px, 2.6vw, 24px); color: var(--ink); line-height: 1.15; margin-bottom: 10px; }
.aw-qz__num { margin: 0 0 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.aw-qz__flag { padding: 3px 8px; border-radius: 999px; background: var(--gold-tint); border: 1px solid var(--gold-rule); color: var(--gold-link); font-size: 9px; }
.aw-qz__hint { margin: 0 0 14px; font-size: 13px; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.aw-qz__counter { margin: 8px 0 0; font-size: 11px; color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; }

.aw-qz__examples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aw-qz__eg { height: 30px; padding: 0 12px; border-radius: 999px; background: transparent; border: 1px dashed var(--gold-rule); color: var(--gold-link); font-family: var(--text); font-size: 12px; cursor: pointer; transition: background 120ms; }
.aw-qz__eg:hover { background: var(--gold-tint); }

.aw-qz__cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.aw-qz__cards--three { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.aw-qz__opt { position: relative; display: block; }
.aw-qz__opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aw-qz__opt > span { display: block; padding: 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--s5); font-size: 12.5px; line-height: 1.6; color: var(--ink-3); transition: border-color 120ms, background 120ms; }
.aw-qz__opt > span b { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.aw-qz__opt input:checked + span { border-color: var(--gold); background: var(--gold-tint); }
.aw-qz__opt input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.aw-qz__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--ink-4); flex: none; }
.aw-qz__dot--on { background: var(--mint); }

.aw-qz__review { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; }
.aw-qz__review li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.aw-qz__review li:last-child { border-bottom: 0; }
.aw-qz__badge { flex: none; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: var(--s5); border: 1px solid var(--rule); color: var(--ink-4); font-size: 12px; font-weight: 700; }
.aw-qz__badge.is-done { background: var(--gold); border-color: var(--gold); color: #141414; }
.aw-qz__rv { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); }
.aw-qz__rv b { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
.aw-qz__rv i { color: var(--ink-4); font-style: normal; }
.aw-opps__btn--sm { height: 32px; padding: 0 12px; font-size: 10px; }
.aw-opps__btn--ghost { background: transparent; border-color: transparent; color: var(--ink-3); }
.aw-opps__btn--ghost:hover { color: var(--ink); }

.aw-qz__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Without the script every question is visible and only Save matters. */
.aw-qz:not(.is-stepped) [data-aw-back], .aw-qz:not(.is-stepped) [data-aw-skip], .aw-qz:not(.is-stepped) [data-aw-next] { display: none; }
.aw-qz.is-stepped [data-aw-save][hidden], .aw-qz.is-stepped [data-aw-next][hidden],
.aw-qz.is-stepped [data-aw-skip][hidden], .aw-qz.is-stepped [data-aw-back][hidden] { display: none; }

.aw-qz__panel { border: 1px solid var(--rule); border-radius: 14px; background: var(--s3); padding: 18px; }
.aw-qz__sideh { font-size: 13px !important; color: var(--ink) !important; letter-spacing: 0.04em; }
.aw-qz__ring { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; }
.aw-qz__ring p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.aw-qz__ring b { font-size: 20px; color: var(--ink); }
.aw-qz__rows { list-style: none; margin: 10px 0 0; padding: 0; }
.aw-qz__rows li { border-top: 1px solid var(--rule-2); }
.aw-qz__rows button { display: flex; width: 100%; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--text); }
.aw-qz__rows span { font-size: 12px; color: var(--ink-3); flex: none; }
.aw-qz__rows em { font-style: normal; font-size: 12px; color: var(--ink); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-qz__privacy { margin: 12px 0 0; padding: 14px; border-radius: 12px; background: var(--teal-tint); border: 1px solid #1F4F4B; font-size: 12px; line-height: 1.6; color: #9FD8D0; }

/* =============================================================== profile (v2) */

.aw-pf__hero { border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); background: var(--s3); margin: 24px 0 20px; }
.aw-pf__banner { position: relative; height: 150px; background: var(--gold-field); }
.aw-pf__private { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid var(--gold-rule); color: var(--gold-link); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
/* Only the avatar overlaps the banner (handoff: by 52px). Pulling the whole row up
   hid the h1 behind the banner. */
.aw-pf__id { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; padding: 0 22px 22px; }
.aw-pf__id img.aw-pf__avatar { position: relative; z-index: 1; margin-top: -52px; width: 104px; height: 104px; border-radius: 999px; border: 3px solid var(--gold); object-fit: cover; background: var(--s5); flex: none; }
.aw-pf__idtext { flex: 1 1 260px; min-width: 0; padding-top: 14px; }
.aw-pf__idtext h1 { font-size: clamp(24px, 3.4vw, 32px); color: var(--ink); line-height: 1.1; }
.aw-pf__headline { margin: 6px 0 10px; font-size: 14px; color: var(--ink-2); }
.aw-pf__headline.is-empty { color: var(--ink-4); font-style: italic; }
.aw-pf__ring { display: flex; align-items: center; gap: 12px; flex: none; padding-top: 14px; }
.aw-pf__ring p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.aw-pf__ring b { color: var(--ink); font-size: 13px; }

.aw-pf__body { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; padding-bottom: 120px; }
.aw-pf__rail { flex: 0 1 240px; position: sticky; top: 24px; min-width: 0; }
@media (max-width: 860px) { .aw-pf__rail { position: static; flex-basis: 100%; } }
.aw-pf__rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.aw-pf__rail a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; color: var(--ink-3); transition: background 120ms, color 120ms, border-color 120ms; }
.aw-pf__rail a:hover { background: var(--s2); color: var(--ink); }
.aw-pf__rail a i { width: 18px; height: 18px; flex: none; border-radius: 999px; border: 1px solid var(--rule); display: grid; place-items: center; font-size: 10px; font-style: normal; }
.aw-pf__rail a.is-done { color: var(--ink); }
.aw-pf__rail a.is-done i { background: var(--gold); border-color: var(--gold); color: #141414; }
.aw-pf__rail a.is-next { border-color: var(--gold-rule); background: var(--gold-field); color: var(--gold-link); }
.aw-pf__main { flex: 1 1 560px; min-width: 0; }

.aw-pf__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; padding: 14px; border-radius: 12px; background: var(--s2); border: 1px solid var(--rule); }
.aw-pf__fitpart { padding: 5px 11px; border-radius: 999px; border: 1px dashed var(--line); color: var(--ink-4); font-size: 11.5px; font-weight: 700; transition: all 160ms var(--ease); }
.aw-pf__fitpart.is-on { border-style: solid; border-color: var(--gold); background: var(--gold-tint); color: var(--gold-link); }
.aw-pf__plus { color: var(--ink-4); font-size: 12px; }
.aw-pf__fit p { flex-basis: 100%; margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-4); }

.aw-pf__savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--s3); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 260ms var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
.aw-pf__savebar.is-up { transform: none; }
.aw-pf__savebar-in { max-width: 1520px; margin: 0 auto; padding: 14px 15px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.aw-pf__savebar-in span { flex: 1 1 200px; font-size: 13px; color: var(--ink-2); }

.aw-opps__saved--bad { background: #3A1820; border-color: #5A2633; color: var(--red); }
.aw-opps input.is-bad { border-color: var(--red); }
.aw-opps__reel-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--ink-4); font-size: 12.5px; text-align: center; padding: 16px; }

/* Selected discipline chips take their own colour, as the handoff lists them. */
.aw-opps__pick[data-k="Character acting and performance"] input:checked + span { background: #10302A; border-color: #1F5A4E; color: #2EC4A5; }
.aw-opps__pick[data-k="Creature"] input:checked + span,
.aw-opps__pick[data-k="Motion capture editing"] input:checked + span { background: #221D38; border-color: #3A3260; color: #B3A6F5; }
.aw-opps__pick[data-k="Facial"] input:checked + span { background: #35231A; border-color: #5A3A2A; color: #F2A57E; }
.aw-opps__pick[data-k="Rigging"] input:checked + span { background: #14263A; border-color: #24405E; color: #7FB2E5; }
.aw-opps__pick[data-k="Technical animation"] input:checked + span { background: #12332F; border-color: #1F4F4B; color: #2BA3A3; }
.aw-opps__pick[data-k="Cinematics"] input:checked + span { background: #3A1820; border-color: #5A2633; color: #F07A95; }

/* ------------------------------------------------------------ board (kanban)
 * From the reference video: columns carry no panel of their own, the header is a coloured
 * dot with a plain count, and an empty column shows a dashed "Drag a role here". */
.aw-kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 16px; overflow-x: auto; padding: 4px 0 14px; align-items: start; }
.aw-kb__col { min-width: 0; border-radius: 12px; padding: 4px; transition: background 140ms, box-shadow 140ms; }
.aw-kb__col.is-over { background: #1F1A0E; box-shadow: inset 0 0 0 1px #E4AC01; }
.aw-opps .aw-kb__col h3 { display: flex; align-items: center; gap: 8px; font-family: var(--text) !important; font-size: 13px !important; font-weight: 700; text-transform: none !important; letter-spacing: normal; color: var(--ink) !important; margin: 0 0 12px; padding: 0 6px; }
.aw-kb__col h3 i { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.aw-kb__col h3 span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.aw-kb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; min-height: 8px; }
.aw-kb__card { background: var(--s3); border: 1px solid var(--rule); border-radius: 12px; padding: 14px; cursor: grab; display: flex; flex-direction: column; gap: 9px; }
.aw-kb__card.is-dragging { opacity: .45; }
.aw-opps a.aw-kb__id { display: flex; align-items: flex-start; gap: 10px; }
.aw-kb__tile { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--s5); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ink-2); overflow: hidden; }
.aw-kb__tile img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.aw-kb__id strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.aw-kb__id em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.aw-kb__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-kb__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--ink-4); }
.aw-kb__move { display: flex; gap: 6px; flex: none; }
.aw-opps .aw-kb__move button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--rule); background: var(--s5); color: var(--ink-2); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.aw-opps .aw-kb__move button:hover { border-color: var(--gold); color: var(--gold-link); }
.aw-kb__empty { margin: 0; padding: 26px 12px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; font-size: 12.5px; color: var(--ink-4); }
.aw-kb__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ------------------------------------------------------------- search palette */
.aw-sp { position: relative; margin: 20px 0 8px; }
.aw-sp input { width: 100%; height: 46px; background: #262626; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); padding: 0 14px; font-family: var(--text); font-size: 13.5px; }
.aw-sp__out { position: absolute; z-index: 20; left: 0; right: 0; top: 52px; background: #2A2A2A; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.aw-sp__out[hidden] { display: none; }
.aw-sp__out button { display: block; width: 100%; text-align: left; padding: 11px 14px; background: none; border: 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-family: var(--text); font-size: 13px; cursor: pointer; }
.aw-sp__out button:last-child { border-bottom: 0; }
.aw-sp__out button:hover, .aw-sp__out button.is-on { background: var(--gold-field); color: var(--gold-link); }
.aw-sp__out em { font-style: normal; color: var(--ink-4); font-size: 11.5px; display: block; margin-top: 2px; }
.aw-sp__none { padding: 12px 14px; font-size: 12.5px; color: var(--ink-4); }

/* The view switch */
.aw-opps__views { display: flex; gap: 6px; margin: 18px 0 4px; }
.aw-opps__views a { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--rule); background: var(--s5); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.aw-opps__views a.is-on { background: var(--gold-tint); border-color: var(--gold); color: var(--gold-link); }

.aw-qz__saved { border-color: #1F5A4E; background: #10302A; margin-bottom: 20px; }
.aw-qz__tick { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--mint); color: #0B1F1A; font-size: 18px; font-weight: 700; margin-bottom: 10px; }

/* ============================================ signed-in hero (design: "Welcome and industry pulse")
 * Values lifted from Animworks Opportunities Signed In.dc.html. */

/* ⚠️ No 1200px cap and no top padding: the board runs the full width of the top bar and
   starts level with it. The cap here was what kept the page narrow after .aw-opps__wrap
   was widened, and the 32px was the gap under the menu. Harvey, 13 Oct 2026. */
.aw-hero { max-width: none; margin: 0; padding: 0; }
.aw-hero__card { background: #181818; border: 1px solid #2A2A2A; border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.35); overflow: hidden; }
.aw-hero__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 20px; padding: 32px 28px 8px; }
.aw-hero__left { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.aw-hero__right { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.aw-hero__who { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.aw-hero__ava { position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; padding: 3px; background: #E4AC01; box-sizing: border-box; }
.aw-opps img.aw-hero__avaimg { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #181818; box-sizing: border-box; }
.aw-hero__dot { position: absolute; right: 2px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #2EC4A5; border: 3px solid #181818; }
.aw-hero__name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aw-hero__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F5BD16; }
.aw-opps .aw-hero__name h1 { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: #F2F0EA; margin: 0; font-size: clamp(28px, 4.4vw, 42px); line-height: 1.02; }
.aw-hero__line { font-size: 13px; line-height: 1.5; color: #9A9893; }

.aw-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aw-hero__chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #141414; border: 1px solid #2A2A2A; font-size: 12px; color: #C9C7C1; max-width: 100%; }
.aw-hero__chip > span { color: #8B8880; flex: none; }
.aw-hero__chip strong { font-weight: 700; color: #F2F0EA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-opps a.aw-hero__edit { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px dashed #3A3220; background: #1F1A0E; color: #F5BD16; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; }
.aw-opps a.aw-hero__edit:hover { border-color: #E4AC01; }

.aw-seg { display: inline-flex; padding: 4px; gap: 4px; background: #141414; border: 1px solid #2A2A2A; border-radius: 10px; flex-wrap: wrap; }
.aw-opps .aw-seg a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 7px; color: #9A9893; font-size: 13px; font-weight: 700; transition: background 180ms, color 180ms; }
.aw-opps .aw-seg a.is-on { background: #E4AC01; color: #141414; }
.aw-opps .aw-seg a b { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.18); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.aw-opps .aw-seg a:not(.is-on) b { background: #222222; color: #C9C7C1; }
.aw-seg--sm { padding: 3px; gap: 2px; border-radius: 8px; }
.aw-opps .aw-seg--sm a { height: 28px; padding: 0 12px; border-radius: 5px; font-size: 12px; }

.aw-hero__text { font-size: 15px; line-height: 1.6; color: #C9C7C1; margin: 0; max-width: 62ch; text-wrap: pretty; }
.aw-hero__meta { font-size: 13px; line-height: 1.5; color: #9A9893; }

.aw-hero__studios { display: flex; align-items: center; gap: 14px; padding-top: 6px; overflow-x: auto; }
.aw-hero__studioslab { flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9A9893; }
.aw-hero__studio { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; transition: transform 160ms var(--ease); }
.aw-hero__studio:hover { transform: translateY(-2px); }
.aw-hero__ini { position: absolute; inset: 0; border-radius: 50%; background: #2A2A2A; border: 1px solid #2A2A2A; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #F2F0EA; }
.aw-hero__badge { position: absolute; right: -5px; top: -5px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #E4AC01; color: #141414; border: 2px solid #181818; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }

.aw-nudge { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: #167A7A; border: 1px solid #1B8A8A; box-shadow: 0 8px 24px rgba(22,122,122,0.3); }
.aw-nudge__ring { position: relative; flex: none; width: 40px; height: 40px; }
.aw-nudge__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #FFF; }
.aw-nudge__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aw-nudge__text strong { font-size: 14px; font-weight: 700; color: #FFF; }
.aw-nudge__text span { font-size: 12px; line-height: 1.45; color: #FFF; }
.aw-opps a.aw-nudge__go { flex: none; height: 34px; padding: 0 14px; border-radius: 6px; background: #E4AC01; color: #141414; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; }
.aw-opps a.aw-nudge__go:hover { background: #F5BD16; color: #141414; }
.aw-hero__switches { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* heatmap */
.aw-heat { background: #141414; border: 1px solid #2A2A2A; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aw-heat__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.aw-heat__top span { font-size: 15px; color: #9A9893; }
.aw-heat__top strong { font-weight: 700; font-size: 18px; color: #F2F0EA; font-variant-numeric: tabular-nums; }
.aw-heat__race { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid #3A3220; background: #1F1A0E; color: #F5BD16; font-family: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.aw-heat__scroll { overflow-x: auto; padding-bottom: 4px; }
.aw-heat__grid { display: inline-grid; grid-template-columns: 24px auto; column-gap: 6px; row-gap: 4px; }
.aw-heat__months { display: grid; grid-template-columns: repeat(53, 9px); column-gap: 2px; height: 14px; }
.aw-heat__months span { grid-row: 1; font-size: 10px; color: #9A9893; white-space: nowrap; }
.aw-heat__days { display: grid; grid-template-rows: repeat(7, 9px); row-gap: 2px; font-size: 9px; color: #8B8880; line-height: 9px; }
.aw-heat__cells { display: grid; grid-template-rows: repeat(7, 9px); grid-auto-flow: column; grid-auto-columns: 9px; gap: 2px; }
.aw-heat__cells span { width: 9px; height: 9px; border-radius: 2px; transition: background 200ms; }
.aw-heat__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #9A9893; }
.aw-heat__legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #9A9893; }
.aw-heat__legend > span { display: flex; gap: 3px; }
.aw-heat__legend i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid #2A2A2A; display: block; }
.aw-heat__note { margin: 0; font-size: 11px; line-height: 1.55; color: #8B8880; }
.aw-live { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #1F5A4E; border-radius: 8px; background: rgba(16,48,42,.15); }
.aw-live__tag { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #2EC4A5; }
.aw-live__tag i { width: 8px; height: 8px; border-radius: 50%; background: #2EC4A5; display: block; }
.aw-live__event { flex: 1 1 200px; min-width: 0; font-size: 13px; color: #C9C7C1; }

/* stats strip */
.aw-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 24px 24px 18px; }
.aw-stat { display: flex; flex-direction: column; gap: 2px; padding-left: 16px; border-left: 2px solid #2A2A2A; }
.aw-stat__k { font-size: 12px; color: #9A9893; }
.aw-stat strong { font-size: 28px; font-weight: 700; line-height: 1.2; color: #F2F0EA; font-variant-numeric: tabular-nums; }
.aw-stat strong span { font-size: 14px; font-weight: 400; color: #9A9893; }
.aw-stat__sub { font-size: 11px; color: #9A9893; }
.aw-stat--sample strong { color: #8B8880; }
.aw-hero__checked { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 24px; padding-top: 14px; border-top: 1px solid #2A2A2A; font-size: 12px; color: #9A9893; }
.aw-hero__pill { padding: 5px 10px; border-radius: 999px; border: 1px solid #3A3220; background: #1F1A0E; color: #F5BD16; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* market blocks */
.aw-mk { position: relative; margin: 0 12px; }
/* The anchor covers the whole column so the cube is clickable, not just the words. Its text
   starts at the label line via padding-top, which also stops the taller "You" label growing
   upward into its own cube. */
.aw-mk__hit { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 10px; text-align: center; box-sizing: border-box; transition: background 140ms; }
.aw-mk__hit:hover { background: rgba(255,255,255,0.04); }
/* ⚠️ NO PLATE ON THE SELECTED COLUMN. Harvey's reference recording, 14 Oct 2026: the light
   rounded plate is the HOVER state only. Selection is shown by the cube turning gold and the
   label going amber, not by a second highlight behind it. Painting both made the selected
   column look permanently hovered. */
.aw-mk__hit:focus-visible { outline: 2px solid #FFC64A; outline-offset: 2px; }
.aw-mk__hit strong { font-size: 13px; font-weight: 700; color: #F2F0EA; }
.aw-mk__hit span { font-size: 12px; color: #9A9893; font-variant-numeric: tabular-nums; }
.aw-mk__hit em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #F5BD16; }
.aw-mk__hit.is-on strong { color: #F5BD16; }
.aw-mk__list { padding: 10px 24px 18px; display: flex; flex-direction: column; }
.aw-opps .aw-mk__list a { display: grid; grid-template-columns: minmax(110px,1fr) minmax(80px,2fr) 64px; gap: 14px; align-items: center; min-height: 52px; padding: 8px 10px; border-top: 1px solid #222222; border-radius: 6px; }
.aw-opps .aw-mk__list a:hover, .aw-opps .aw-mk__list a.is-on { background: #1F1F1F; }
.aw-mk__list strong { display: block; font-size: 14px; font-weight: 700; color: #F2F0EA; }
.aw-mk__list span span { font-size: 11px; color: #9A9893; }
.aw-mk__bar { height: 6px; border-radius: 999px; background: #222222; overflow: hidden; display: block; }
.aw-mk__bar span { display: block; height: 100%; background: #23A3A3; border-radius: 999px; }
.aw-mk__list b { font-size: 14px; font-weight: 700; color: #F2F0EA; text-align: right; font-variant-numeric: tabular-nums; }

.aw-drill { margin: 0 24px 24px; border: 1px solid #2A2A2A; border-radius: 10px; background: #141414; overflow: hidden; }
.aw-drill__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #222222; }
.aw-drill__head strong { font-size: 14px; color: #F2F0EA; }
.aw-drill__head i { font-style: normal; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: #12332F; border: 1px solid #1F4F4B; color: #2BA3A3; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.aw-opps .aw-drill__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 14px; border-top: 1px solid #222222; }
.aw-opps .aw-drill__row:hover { background: #1A1A1A; }
.aw-drill__row strong { display: block; font-size: 14px; font-weight: 700; color: #F2F0EA; }
.aw-drill__row span span { font-size: 12px; color: #9A9893; }
.aw-drill__none { margin: 0; padding: 16px 14px; font-size: 13px; color: #9A9893; }

@media (max-width: 760px) { .aw-hero__head { padding: 22px 16px 8px; } .aw-hero__stats, .aw-hero__checked, .aw-drill { margin-left: 16px; margin-right: 16px; } }
.aw-mk__scroll { overflow-x: auto; padding: 0 12px 4px; }

/* ===================================== the list and its sidebar (design: the row after the hero) */
/* ⚠️ .aw-lower is a SIBLING of .aw-opps__wrap, not a child, so it needs the same rail or
   it runs full bleed while the hero above it stops at the menu edges. Removing its old
   1200px cap is what exposed that. Same three values as .aw-opps__wrap, so both halves
   land on x=28 and x=1518 on a 1545 viewport. Harvey, 14 Oct 2026: "make the bottom half
   align with the top". */
.aw-lower { max-width: 1520px; margin: 0 auto; padding: 32px 15px 96px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.aw-lower__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.aw-lower__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.aw-lower__top > span { font-size: 13px; line-height: 1.5; color: #9A9893; }
.aw-lower__foot { margin: 8px 0 0; font-size: 12px; color: #8B8880; }

.aw-sp { position: relative; z-index: 20; margin: 0; }
.aw-sp label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9A9893; margin-bottom: 6px; }
.aw-sp__field { position: relative; }
.aw-opps .aw-sp input { width: 100%; box-sizing: border-box; height: 48px; padding: 0 48px 0 16px; background: #262626; border: 1px solid #3A3A3A; border-radius: 10px; color: #F2F0EA; font-family: var(--text); font-size: 14px; }
.aw-opps .aw-sp input:focus { border-color: var(--gold); outline: none; }
.aw-sp__field svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #9A9893; pointer-events: none; }
.aw-sp__out { top: calc(100% + 6px); }

.aw-rough { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: var(--s3); border: 1px solid var(--rule); }
.aw-rough__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--teal-ink); flex: none; }
.aw-rough__text { flex: 1 1 260px; min-width: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.aw-rough__text strong { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 3px; }

.aw-side { flex: 1 1 280px; max-width: 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
@media (max-width: 900px) { .aw-side { position: static; max-width: none; } }
.aw-side__card, .aw-side__join { background: #181818; border: 1px solid #2A2A2A; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.aw-side__lab { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9A9893; }
.aw-side__card p, .aw-side__join p { margin: 0; font-size: 13px; line-height: 1.55; color: #9A9893; }
.aw-side__card p .aw-opps__tag { margin-right: 6px; }
.aw-side__note { font-size: 13px; line-height: 1.5; color: #9A9893; }

/* member card */
.aw-mc { position: relative; background: #1C1C1C; border: 1px solid #2A2A2A; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
.aw-mc__banner { position: relative; height: 112px; background: #1F1A0E; }
.aw-mc__tag { position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F5BD16; }
.aw-mc__tag i { width: 20px; height: 20px; border-radius: 5px; background: #2A2213; border: 1px solid #3A3220; display: grid; place-items: center; font-style: normal; font-size: 8px; }
.aw-opps a.aw-mc__edit { position: absolute; right: 12px; top: 10px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid #3A3220; background: rgba(0,0,0,.35); color: #F5BD16; display: grid; place-items: center; font-size: 13px; }
.aw-mc__body { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.aw-mc__ava { position: relative; z-index: 1; width: 84px; height: 84px; margin-top: -42px; border-radius: 50%; padding: 3px; background: #E4AC01; box-sizing: border-box; }
.aw-opps img.aw-mc__avaimg { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #1C1C1C; box-sizing: border-box; }
.aw-mc__dot { position: absolute; right: 2px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #2EC4A5; border: 3px solid #1C1C1C; }
.aw-mc__id strong { display: block; font-size: 19px; font-weight: 700; color: #F2F0EA; line-height: 1.15; }
.aw-mc__id span { font-size: 12.5px; color: #9A9893; }
.aw-mc__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aw-mc__tools { display: flex; gap: 6px; }
.aw-mc__tools i { width: 28px; height: 28px; border-radius: 7px; background: #141414; border: 1px solid #2A2A2A; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #C9C7C1; }
.aw-mc__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid #2A2A2A; border-radius: 10px; background: #141414; overflow: hidden; }
.aw-opps .aw-mc__stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-left: 1px solid #2A2A2A; }
.aw-opps .aw-mc__stats a:first-child { border-left: 0; }
.aw-opps .aw-mc__stats a:hover { background: #1C1C1C; }
.aw-mc__stats a span:first-child { font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.aw-mc__stats a span:last-child { font-size: 11px; color: #9A9893; }
.aw-mc__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #9A9893; }
.aw-opps a.aw-mc__go { height: 44px; border-radius: 6px; background: #E4AC01; color: #141414; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.aw-opps a.aw-mc__go:hover { background: #F5BD16; color: #141414; }
.aw-mc__what { border-top: 1px solid #2A2A2A; padding-top: 12px; }
.aw-mc__what summary { cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #9A9893; list-style: none; }
.aw-mc__what summary::-webkit-details-marker { display: none; }
.aw-mc__what summary::after { content: '⌄'; float: right; }
.aw-mc__what p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0; border-bottom: 1px solid #222222; font-size: 12.5px; }
.aw-mc__what p span { color: #9A9893; flex: none; }
.aw-mc__what p b { color: #F2F0EA; font-weight: 700; text-align: right; }
.aw-opps__grouphead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aw-opps__grouphead h2 { font-size: 13px !important; letter-spacing: 0.1em; color: var(--ink) !important; }
.aw-opps__grouphead span { font-size: 12px; color: var(--ink-4); flex: none; }

/* ============================================================== button specificity
 * ⚠️ The theme declares  :is(.btn, .button, button, [type="submit"], [type="button"])
 * { background: var(--btn-bgcolor, #F3F3F3) }  at specificity (0,1,0), and its stylesheet
 * loads AFTER ours. A bare class of ours ties and loses, which is why the Rank History
 * button rendered as a light grey theme button on staging while looking right in a preview
 * with no theme. Every button rule below is scoped under .aw-opps so it outranks that. */

.aw-opps button {
	font-family: var(--text);
	font-size: inherit;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	background: transparent;
	color: inherit;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	height: auto;
	padding: 0;
	text-shadow: none;
	cursor: pointer;
}

.aw-opps .aw-heat__race {
	display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
	border-radius: 999px; border: 1px solid #3A3220; background: #1F1A0E; color: #F5BD16;
	font-size: 12px; font-weight: 700;
}
.aw-opps .aw-heat__race:hover { border-color: #E4AC01; }

.aw-opps button.aw-opps__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 44px; padding: 0 18px; border-radius: 6px; border: 1px solid transparent;
	font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.aw-opps button.aw-opps__btn--gold { background: var(--gold); color: #141414; }
.aw-opps button.aw-opps__btn--gold:hover { background: var(--gold-hi); }
.aw-opps button.aw-opps__btn--line { background: transparent; border-color: var(--line); color: var(--ink); }
.aw-opps button.aw-opps__btn--line:hover { border-color: var(--gold); }
.aw-opps button.aw-opps__btn--ghost { background: transparent; color: var(--ink-3); }
.aw-opps button.aw-opps__btn--sm { height: 32px; padding: 0 12px; font-size: 10px; }

.aw-opps .aw-qz__seg { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--rule); }
.aw-opps .aw-qz__seg.is-done { background: var(--gold); }
.aw-opps .aw-qz__seg.is-here { background: var(--gold-link); box-shadow: 0 0 0 3px rgba(245,189,22,.18); }

.aw-opps .aw-qz__eg { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px dashed var(--gold-rule); background: transparent; color: var(--gold-link); font-size: 12px; }
.aw-opps .aw-qz__eg:hover { background: var(--gold-tint); }

.aw-opps .aw-kb__move button { width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--rule); background: var(--s5); color: var(--ink-2); font-size: 13px; }
.aw-opps .aw-kb__move button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-link); }
.aw-opps .aw-kb__move button:disabled { opacity: .35; cursor: default; }

.aw-opps .aw-qz__rows button { display: flex; width: 100%; gap: 12px; align-items: baseline; justify-content: space-between; padding: 10px 0; text-align: left; }
.aw-opps .aw-sp__out button { display: block; width: 100%; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); color: var(--ink-2); font-size: 13px; }
.aw-opps .aw-sp__out button:hover, .aw-opps .aw-sp__out button.is-on { background: var(--gold-field); color: var(--gold-link); }

/* The design's own values, scoped high enough to beat the theme's form and button rules.
 * Rank History is padded 0 12px 0 10px: asymmetric, because the icon sits on the left. */
.aw-opps .aw-heat__race { padding: 0 12px 0 10px; }

.aw-opps .aw-sp .aw-sp__field input[type="text"],
.aw-opps .aw-sp .aw-sp__field input {
	width: 100%;
	box-sizing: border-box;
	height: 48px;
	padding: 0 48px 0 16px;
	background: #262626;
	border: 1px solid #3A3A3A;
	border-radius: 10px;
	color: #F2F0EA;
	font-family: var(--text);
	font-size: 15px;
	line-height: normal;
	box-shadow: none;
	margin: 0;
}
.aw-opps .aw-sp .aw-sp__field input:focus { border-color: var(--gold); outline: none; }

/* ================================================= sign-in banner (requests 11 and 12)
 * Inside the hero card, full width, dark purple, white text. */
.aw-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 20px 20px 0; padding: 16px 18px; border-radius: 12px; background: #2B2463; border: 1px solid #453C8F; color: #FFFFFF; }
.aw-banner__ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); display: grid; place-items: center; color: #FFFFFF; }
.aw-banner__text { flex: 1 1 320px; min-width: 0; font-size: 13px; line-height: 1.5; color: #FFFFFF; }
.aw-banner__text strong { display: block; font-size: 16px; font-weight: 700; margin-bottom: 3px; color: #FFFFFF; }
.aw-opps a.aw-banner__out, .aw-opps a.aw-banner__in { height: 40px; padding: 0 18px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.aw-opps a.aw-banner__out { border: 1px solid rgba(255,255,255,0.55); color: #FFFFFF; }
.aw-opps a.aw-banner__out:hover { border-color: #FFFFFF; color: #FFFFFF; }
.aw-opps a.aw-banner__in { background: #E4AC01; color: #141414; }
.aw-opps a.aw-banner__in:hover { background: #F5BD16; color: #141414; }

/* ============================================================ role card (request 3)
 * Click anywhere to expand in place, one at a time, chevron rotates. */
.aw-card { background: var(--s3); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; transition: border-color 120ms; }
.aw-card:hover { border-color: var(--line); }
.aw-card.is-stale { border-style: dashed; }
.aw-card.is-open { border-color: var(--gold-rule); }
.aw-opps .aw-card__head { display: flex; gap: 16px; align-items: flex-start; width: 100%; padding: 20px; text-align: left; background: transparent; }
.aw-card__tile { flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--s5); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.aw-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.aw-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aw-card__age { font-size: 12px; color: var(--ink-3); }
.aw-card__title { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.aw-card__raw { font-size: 12px; color: var(--ink-3); }
.aw-card__studio { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.aw-card__studio strong { font-weight: 700; color: var(--ink); }
.aw-card__loc { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.aw-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-card__why { font-size: 14px; line-height: 1.5; color: var(--ink); }
.aw-card__why span { color: var(--ink-3); }
.aw-card__reach { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.aw-card__chev { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-2); transition: transform 220ms var(--ease), border-color 120ms; }
.aw-card.is-open .aw-card__chev { transform: rotate(180deg); border-color: var(--gold); color: var(--gold-link); }
.aw-card__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease); }
.aw-card.is-open .aw-card__more { grid-template-rows: 1fr; }
.aw-card__more > div { overflow: hidden; }
.aw-card__inner { margin: 0 20px 20px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
.aw-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.aw-card__facts > div { background: #141414; border: 1px solid #222222; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.aw-card__facts span { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.aw-card__facts b { font-size: 14px; font-weight: 700; color: var(--ink); }
.aw-card__facts b.is-none { color: var(--ink-3); font-weight: 400; }
.aw-card__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.aw-card__src { margin: 0; font-size: 12px; color: var(--ink-3); text-align: right; }

.aw-opps a.aw-btn { height: 40px; padding: 0 18px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.aw-opps a.aw-btn--gold { background: #E4AC01; color: #141414; border: 0; }
.aw-opps a.aw-btn--gold:hover { background: #F5BD16; color: #141414; }
.aw-opps a.aw-btn--line { border: 1px solid #3A3A3A; color: var(--ink); }
.aw-opps a.aw-btn--line:hover { border-color: #E4AC01; color: var(--gold-link); }

/* tags, with the handoff's exact colours */
.aw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.aw-tag--c { height: auto; padding: 4px 10px; font-size: 12px; letter-spacing: normal; text-transform: none; background: var(--s5); border: 1px solid var(--rule); color: var(--ink-2); }
.aw-tag--new { background: #10302A; border: 1px solid #1F5A4E; color: #2EC4A5; }
.aw-tag--strong { background: #2A2213; border: 1px solid #3A3220; color: #F5BD16; }
.aw-tag--good { background: #12332F; border: 1px solid #1F4F4B; color: #2BA3A3; }
.aw-tag--dash { background: transparent; border: 1px dashed #3A3A3A; color: #9A9893; }
/* Indie provenance.
   ⚠️ NOT VIOLET. The first version used #241C33/#B49BE8, which is within a few points of the
   Games chip (#221D38/#B3A6F5) sitting on the same card two lines below it. Two different
   kinds of information in the same colour is the fault DESIGN.md warns about with the two
   ambers. This is an outline rather than a fill, which puts it with "Re-checking" as a note
   about the row rather than with the craft chips, and it is solid rather than dashed so the
   two notes stay apart from each other. */
.aw-tag--indie { background: transparent; border: 1px solid #4E4A42; color: #CFC9BC; }

/* ---------------------------------------------------------------- the shortlist star
   Every number and colour is the shortlist handoff's own (14 Oct 2026): 32px, 6px radius,
   a 14px star, border and colour 120ms, background and fill 160ms.
     not shortlisted  border #3A3A3A  ink #C9C7C1  background transparent
     shortlisted      border #F5BD16  ink #F5BD16  background #2A2213
     applied          border #2BA3A3  ink #2BA3A3  background #181818
     interviewing     border #B3A6F5  ink #B3A6F5  background #181818
     hover            border #E4AC01  ink #F5BD16  background unchanged            */
.aw-opps .aw-star {
	flex: none; width: 32px; height: 32px; padding: 0; border-radius: 6px;
	border: 1px solid #3A3A3A; background: transparent; color: #C9C7C1;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
	transition: border-color 120ms, color 120ms, background 160ms;
}
.aw-opps .aw-star svg { transition: fill 160ms; }
.aw-opps a.aw-star { text-decoration: none; }
.aw-opps .aw-star:hover,
.aw-opps a.aw-star:hover { border-color: #E4AC01; color: #F5BD16; }
.aw-opps .aw-star:focus-visible { outline: 2px solid #FFC64A; outline-offset: 2px; }
.aw-opps .aw-star[data-aw-state="short"]   { border-color: #F5BD16; color: #F5BD16; background: #2A2213; }
.aw-opps .aw-star[data-aw-state="applied"] { border-color: #2BA3A3; color: #2BA3A3; background: #181818; }
.aw-opps .aw-star[data-aw-state="talking"] { border-color: #B3A6F5; color: #B3A6F5; background: #181818; }
/* ⚠️ A role already applied for or being interviewed for does nothing when pressed: those are
   the member's own decisions and a mis-tap must not drop a job out of a later stage. The
   cursor says so rather than the button looking broken. */
.aw-opps .aw-star[data-aw-locked] { cursor: default; }
.aw-opps .aw-star[data-aw-locked]:hover { border-color: inherit; }
.aw-opps .aw-star[data-aw-state="applied"]:hover { border-color: #2BA3A3; color: #2BA3A3; }
.aw-opps .aw-star[data-aw-state="talking"]:hover { border-color: #B3A6F5; color: #B3A6F5; }

/* On the role card the star sits over the top right corner, above the expand chevron. The card
   head is itself a button, so the star cannot live inside it. */
.aw-opps .aw-card { position: relative; }
.aw-opps .aw-card__star { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; }
.aw-opps .aw-card__side { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 40px; }

/* On a studio tile the role row carries it at the end. */
.aw-opps .aw-studio__roles { display: flex; align-items: flex-start; gap: 10px; }
.aw-opps .aw-studio__roles > a { flex: 1; min-width: 0; }

/* The optional sub-question inside question two, and the Optional marker on the profile. */
.aw-opps .aw-qz__sub { margin: 20px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: var(--ink-2); }
.aw-opps .aw-qz__sub span,
.aw-opps .aw-opps__opt { margin-left: 8px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------------------------------------------- the application tracker */
.aw-opps .aw-trk__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
	gap: 16px; padding: 28px 0 18px; }
.aw-opps .aw-trk__head h1 { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.02em; color: var(--ink); margin: 0 0 8px; font-size: clamp(26px, 3.6vw, 36px); line-height: 1.05; }
.aw-opps .aw-trk__head p { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
/* The counts. Each one is the member's own saved board, so the figures are the whole tracker
   and not just what is live today. */
.aw-opps .aw-trk__counts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; padding: 0; list-style: none; }
.aw-opps .aw-trk__counts li { flex: 1 1 120px; display: flex; flex-direction: column; gap: 2px;
	padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--s2); }
.aw-opps .aw-trk__counts b { font-size: 26px; font-weight: 700; line-height: 1; color: var(--ink);
	font-variant-numeric: tabular-nums; }
.aw-opps .aw-trk__counts span { font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-trk__counts-all { border-color: #3A3220 !important; background: #1F1A0E !important; }
.aw-opps .aw-trk__counts-all b { color: #F5BD16; }
.aw-opps .aw-kb__none { margin: 0 0 18px; padding: 16px; border: 1px dashed var(--line); border-radius: 12px;
	font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.aw-opps .aw-kb__none a { color: var(--gold); }
@media (max-width: 760px) { .aw-opps .aw-trk__head { padding: 20px 0 14px; } }

/* The drill-down's "show the other N". A native <details>, so it opens without JavaScript. */
.aw-opps .aw-drill__more { border-top: 1px solid #222222; }
/* ⚠️ THE BROWSER'S OWN HIDING IS NOT ENOUGH HERE. A closed <details> hides its children with
   a UA rule, which any author `display` beats -- and .aw-drill__row is display:flex, so all
   twenty rows stayed on screen with a "Show the other 15" button above them doing nothing.
   This is the author-level equivalent of the rule the UA was trying to apply. */
.aw-opps .aw-drill__more:not([open]) > *:not(summary) { display: none; }
.aw-opps .aw-drill__more > summary {
	display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
	padding: 12px 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; color: #E4AC01; transition: color 120ms var(--ease);
}
.aw-opps .aw-drill__more > summary::-webkit-details-marker { display: none; }
.aw-opps .aw-drill__more > summary:hover { color: #F5BD16; }
.aw-opps .aw-drill__more > summary:focus-visible { outline: 2px solid #FFC64A; outline-offset: 2px; border-radius: 6px; }
.aw-opps .aw-drill__more > summary svg { transition: transform 220ms var(--ease); }
.aw-opps .aw-drill__more[open] > summary svg { transform: rotate(180deg); }
/* one label at a time, chosen by the open state rather than by script */
.aw-opps .aw-drill__more > summary .aw-drill__more-open { display: none; }
.aw-opps .aw-drill__more[open] > summary .aw-drill__more-open { display: inline; }
.aw-opps .aw-drill__more[open] > summary .aw-drill__more-shut { display: none; }
@media (prefers-reduced-motion: reduce) { .aw-opps .aw-drill__more > summary svg { transition: none; } }
.aw-opps .aw-ls__indie { margin: 0; padding: 12px 14px; border: 1px solid #3C2F56; border-radius: 10px;
	background: #1B1526; font-size: 14px; line-height: 1.55; color: #C9C7C1; }
.aw-tag--c[data-k="Technical animation"] { background: #12332F; color: #2BA3A3; border-color: #1F4F4B; }
.aw-tag--c[data-k="Cinematics"] { background: #3A1820; color: #F07A95; border-color: #5A2633; }
.aw-tag--c[data-k="Character acting and performance"] { background: #10302A; color: #2EC4A5; border-color: #1F5A4E; }
.aw-tag--c[data-k="Rigging"] { background: #14263A; color: #7FB2E5; border-color: #24405E; }
.aw-tag--c[data-k="Facial"], .aw-tag--c[data-k="Feature film"] { background: #35231A; color: #F2A57E; border-color: #5A3A2A; }
.aw-tag--c[data-k="Games"], .aw-tag--c[data-k="Creature"], .aw-tag--c[data-k="Motion capture editing"] { background: #221D38; color: #B3A6F5; border-color: #3A3260; }

/* ========================================================= Hiring over time (request 8) */
.aw-race { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; }
.aw-race[hidden] { display: none; }
.aw-race__back { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(8px); }
.aw-race__box { position: relative; width: min(760px, 100%); max-height: 86vh; overflow: auto; background: var(--s3); border: 1px solid var(--rule); border-radius: 14px; padding: 22px; animation: awRaceIn 220ms var(--ease); }
@keyframes awRaceIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aw-race__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.aw-opps .aw-race__head h2 { font-size: 24px !important; color: var(--ink) !important; }
.aw-opps .aw-race__x { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rule); color: var(--ink-2); font-size: 18px; }
.aw-race__tabs { display: flex; gap: 4px; padding: 4px; background: #141414; border: 1px solid var(--rule); border-radius: 10px; margin-bottom: 16px; }
.aw-opps .aw-race__tabs button { flex: 1; height: 34px; border-radius: 7px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.aw-opps .aw-race__tabs button.is-on { background: var(--gold); color: #141414; }
.aw-race__rows { display: flex; flex-direction: column; gap: 6px; min-height: 280px; }
.aw-race__row { display: grid; grid-template-columns: 150px 1fr 54px; gap: 10px; align-items: center; height: 38px; transition: transform 600ms var(--ease); }
.aw-race__row > span:first-child { font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-race__bar { height: 22px; border-radius: 6px; background: var(--teal); transition: width 600ms var(--ease); }
.aw-race__row b { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.aw-race__row i { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-left: 6px; }
.aw-race__ctrl { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.aw-opps .aw-race__ctrl button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--rule); color: var(--ink-2); }
.aw-opps .aw-race__ctrl button.aw-race__play { background: var(--gold); border-color: var(--gold); color: #141414; }
.aw-opps .aw-race__ctrl button[data-aw-race-replay] { width: auto; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aw-race__ctrl input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--gold); }
.aw-race__ctrl span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.aw-race__note, .aw-race__none { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }

/* ---------------------------------------------- the animated bits the design calls for */
@keyframes awBar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
@keyframes awPing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.6); opacity: 0; } }

.aw-heat__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.aw-heat__bars i { width: 3px; height: 13px; border-radius: 1px; background: #F5BD16; transform-origin: bottom; animation: awBar 1200ms ease-in-out infinite; }
.aw-heat__bars i:nth-child(2) { animation-delay: 150ms; }
.aw-heat__bars i:nth-child(3) { animation-delay: 300ms; }
.aw-heat__bars i:nth-child(4) { animation-delay: 450ms; }

.aw-live__tag i { position: relative; }
.aw-live__tag i em { position: absolute; inset: 0; border-radius: 50%; background: #2EC4A5; animation: awPing 1800ms cubic-bezier(0,0,0.2,1) infinite; }

.aw-heat__cells span.is-pinned { box-shadow: 0 0 0 2px #FFC64A; }

@media (prefers-reduced-motion: reduce) {
	.aw-heat__bars i, .aw-live__tag i em { animation: none !important; }
}

/* -------------------------------------------- Hiring over time, the design's own values */
.aw-race__box { width: 100%; max-width: 600px; max-height: 92vh; overflow: auto; background: #1C1C1C; border: 1px solid #2A2A2A; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.6); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.aw-race__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0; }
.aw-race__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F5BD16; margin-bottom: 4px; }
.aw-opps .aw-race__head h2 { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: #F2F0EA !important; margin: 0; font-size: 26px !important; line-height: 1.1; }
.aw-opps .aw-race__x { flex: none; width: 36px; height: 36px; border-radius: 6px; color: #9A9893; display: flex; align-items: center; justify-content: center; }
.aw-opps .aw-race__x:hover { background: #2A2A2A; color: #F2F0EA; }
.aw-race__tabs { display: flex; padding: 3px; gap: 2px; background: #141414; border: 1px solid #2A2A2A; border-radius: 8px; align-self: flex-start; margin: 0; }
.aw-opps .aw-race__tabs button { flex: none; height: 30px; padding: 0 14px; border-radius: 5px; color: #9A9893; font-size: 12px; font-weight: 700; }
.aw-opps .aw-race__tabs button.is-on { background: #E4AC01; color: #141414; }
.aw-race__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.aw-race__cap span:first-child { font-size: 14px; font-weight: 700; color: #F2F0EA; }
.aw-race__cap span:last-child { font-size: 13px; font-weight: 700; color: #F5BD16; font-variant-numeric: tabular-nums; }
.aw-race__plot { position: relative; height: 264px; flex: none; }
.aw-race__r { position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 12px; transition: transform 600ms var(--ease); will-change: transform; }
.aw-race__rank { width: 18px; flex: none; text-align: right; font-size: 12px; color: #9A9893; font-variant-numeric: tabular-nums; }
.aw-race__who { width: 150px; flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; }
.aw-race__ini { flex: none; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #141414; }
.aw-race__who b { font-size: 13px; font-weight: 700; color: #F2F0EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-race__track { position: relative; flex: 1; min-width: 0; height: 26px; margin-right: 72px; }
.aw-race__fill { position: relative; display: block; height: 100%; transition: width 600ms var(--ease); }
.aw-race__fill > i { display: block; height: 100%; border-radius: 6px; opacity: 0.92; }
.aw-race__val { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; font-size: 13px; font-weight: 700; color: #F2F0EA; white-space: nowrap; font-variant-numeric: tabular-nums; }
.aw-race__ctrl { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid #2A2A2A; flex: none; margin: 0; }
.aw-opps .aw-race__ctrl button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #3A3A3A; color: #C9C7C1; display: inline-flex; align-items: center; justify-content: center; }
.aw-opps .aw-race__ctrl button:hover { border-color: #E4AC01; color: #F5BD16; }
.aw-race__ctrl input[type="range"] { flex: 1; min-width: 0; margin-left: 6px; accent-color: #E4AC01; cursor: pointer; }
.aw-race__ctrl span { width: 60px; text-align: right; font-size: 11px; color: #9A9893; font-variant-numeric: tabular-nums; }
.aw-race__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #9A9893; }
.aw-opps .aw-race__foot button { color: #F5BD16; font-size: 12px; font-weight: 700; }

/* Roles posted per month, read from the studios' own posted dates. */
.aw-months { display: flex; align-items: flex-end; gap: 4px; padding: 10px 0 2px; overflow-x: auto; }
.aw-months > span { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.aw-months i { display: block; width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #F5BD16, #7A5C08); }
.aw-months b { font-size: 11px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.aw-months em { font-style: normal; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
/* The label sits below the block base, never under it. */
.aw-mk__hit strong { line-height: 1.2; }
.aw-drill__meta { font-size: 12px; color: var(--ink-3); }
/* ⚠️ The GRID moved onto the inner link when the shortlist star arrived (14 Oct 2026): the row
   is now a wrapper holding the link and the star side by side. */
.aw-opps .aw-drill__row { display: flex; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid #222222; }
.aw-opps .aw-drill__link { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(90px, 1.4fr) 54px; gap: 16px; align-items: center; }
.aw-drill__id strong { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.aw-drill__id > span { font-size: 12px; color: var(--ink-3); }
.aw-drill__bar { height: 6px; border-radius: 999px; background: #2A2A2A; overflow: hidden; display: block; }
.aw-drill__bar > span { display: block; height: 100%; border-radius: 999px; background: #E4AC01; transition: width 320ms var(--ease); }
.aw-opps .aw-drill__link b { font-size: 15px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.aw-drill__note { margin: 12px 24px 24px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 620px) { .aw-opps .aw-drill__link { grid-template-columns: 1fr 44px; } .aw-drill__bar { grid-column: 1 / -1; } }

/* Search dropdown groups, as the design labels them. */
.aw-sp__group { display: block; padding: 8px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8B8880; }
.aw-opps .aw-sp__out button { display: flex; align-items: center; gap: 10px; }
.aw-sp__ini { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #1F1F1F; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; font-weight: 700; color: #F2F0EA; }
/* A studio logo fills its tile; initials show until one is added. */
/* ⚠️ A ROUND TILE CLIPS A SQUARE MARK. The largest square that fits inside a circle is its
   diameter divided by root 2, about 70.7% of it. These marks were being drawn at 100% with
   4px of padding, which is 38px of artwork inside a 40px circle whose safe area is 28px, so
   the corners of Epic's shield were sliced flat. Harvey, 14 Oct 2026: "make sure that no
   logos are cut off."
   68% leaves a hair of breathing room inside the inscribed square. Keep the percentage, not
   a pixel padding: the same rule has to hold wherever these tiles are reused at other sizes.
   ⚠️ The second half of the fault was `border-radius: inherit` on the IMG, which rounded the
   artwork itself rather than masking it, so even a correctly sized mark lost its corners.
   The tile is the round thing; the mark inside it never is. */
.aw-hero__ini img,
.aw-card__tile img {
	width: 68%; height: 68%;
	object-fit: contain;
	display: block;
	border-radius: 0;          /* the circle is the parent's job, not the artwork's */
	padding: 0;
	box-sizing: border-box;
}
.aw-card__tile img { padding: 6px; }

/* ------------------------------------------------- search dropdown, reference 09 */
.aw-sp.is-open .aw-sp__field input { border-color: #E4AC01; }
.aw-sp__out { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30; background: #2A2A2A; border: 1px solid #3A3A3A; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.65); padding: 6px; overflow: hidden; }
.aw-sp__out[hidden] { display: none; }
.aw-sp__group { display: block; padding: 10px 12px 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #8B8880; }
.aw-opps .aw-sp__row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 8px; text-align: left; }
.aw-opps .aw-sp__row:hover, .aw-opps .aw-sp__row.is-on { background: #363636; }
.aw-sp__ini { flex: none; width: 26px; height: 26px; border-radius: 7px; background: #1F1F1F; display: flex; align-items: center; justify-content: center; font-style: normal; font-size: 9px; font-weight: 700; color: #F2F0EA; }
.aw-sp__dot { flex: none; width: 9px; height: 9px; margin: 0 8px; border-radius: 999px; display: block; }
.aw-sp__mid { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.aw-sp__mid strong { font-size: 14px; font-weight: 700; color: #F2F0EA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-sp__mid em { font-style: normal; font-size: 12px; color: #9A9893; }
.aw-sp__row--role .aw-sp__mid { flex-direction: column; gap: 1px; align-items: flex-start; }
.aw-sp__tag { flex: none; font-size: 11px; font-weight: 700; color: #2EC4A5; }
.aw-sp__meta { flex: none; font-size: 12px; color: #9A9893; }
.aw-sp__none { margin: 0; padding: 12px 14px; font-size: 12.5px; color: #9A9893; }
.aw-kb__lead { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
/* The theme tints a focused input; name the field precisely so the amber is exact. */
.aw-opps .aw-sp .aw-sp__field input[type="text"]:focus,
.aw-opps .aw-sp.is-open .aw-sp__field input[type="text"] { border-color: #E4AC01; box-shadow: none; outline: none; }
/* Search field icons: magnifier when empty, amber arrow once typing (design). */
.aw-sp__icons { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; }
.aw-sp__icons svg { position: absolute; inset: 0; transition: opacity 200ms, transform 200ms cubic-bezier(0.22,1,0.36,1); }
.aw-sp__ico-find { color: #9A9893; opacity: 1; }
.aw-sp__ico-go { opacity: 0; transform: translateX(-4px); }
.aw-sp.has-text .aw-sp__ico-find { opacity: 0; transform: translateX(4px); }
.aw-sp.has-text .aw-sp__ico-go { opacity: 1; transform: none; }

.aw-sp__foot { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px 4px; margin-top: 4px; border-top: 1px solid #3A3A3A; font-size: 11.5px; color: #8B8880; }

/* The signed-out sidebar card, in the design's words. */
.aw-opps .aw-side__h { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase; font-size: 20px !important; line-height: 1.15; color: var(--ink) !important; }
.aw-side__already { font-size: 12.5px; color: var(--ink-3); }
.aw-opps .aw-side__already a { color: var(--gold-link); font-weight: 700; }
/* A tag is a flex item of the card, so it stretched to the card's width. Tags hug their
   text; the identity row, chips and footer still span. */
.aw-kb__card > .aw-tag { align-self: flex-start; }
.aw-opps .aw-kb__card > a.aw-kb__id, .aw-kb__card > .aw-kb__chips, .aw-kb__card > .aw-kb__foot { align-self: stretch; }

/* ⚠️ The theme sets margin-bottom:-5px on labels, which pulled this one onto the field. */
.aw-opps .aw-sp label { display: block; margin: 0 0 6px; padding: 0; line-height: 1.4; }

/* Selecting a card lifts its head, as the reference shows, so the open one reads as chosen. */
.aw-card.is-open { border-color: #3A3A3A; }
.aw-card.is-open .aw-card__head { background: rgba(255, 255, 255, 0.045); }
.aw-opps .aw-card__head { transition: background 160ms var(--ease); }
.aw-card__tile { overflow: hidden; }

/* ============================================================== the listing
 * One opportunity, the full page. Every number below is read out of
 * "Animworks Opportunity Listing.dc.html" (listing-handoff, 13 Oct 2026).
 * ⚠️ Everything is scoped under .aw-opps because WoodMart styles bare buttons, inputs and
 * anchors at (0,1,0) and loads after us: an unscoped rule here silently loses. */

.aw-ls .aw-opps__wrap { display: flex; flex-direction: column; gap: 24px; padding-top: 0; }

/* ------------------------------------------------------------- breadcrumb */
.aw-opps .aw-ls__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-4); padding-top: 20px; }
.aw-opps .aw-ls__crumb a { display: flex; align-items: center; gap: 6px; color: var(--ink-4); }
.aw-opps .aw-ls__crumb a:hover { color: var(--gold-link); }
.aw-opps .aw-ls__crumb .is-here { color: var(--ink-2); }
.aw-opps .aw-ls__gone { padding: 40px 0; font-size: 15px; color: var(--ink-2); }

/* ----------------------------------------------------------- state banner */
.aw-opps .aw-ls__state {
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
	padding: 16px 20px; border-radius: 12px; background: var(--s2); border: 1px dashed var(--line);
}
.aw-opps .aw-ls__state.is-closed { background: var(--s3); border-style: solid; }
.aw-opps .aw-ls__statedot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-link); }
.aw-opps .aw-ls__state.is-closed .aw-ls__statedot { background: var(--ink-4); }
.aw-opps .aw-ls__statetext { display: flex; flex-direction: column; gap: 2px; flex: 1 1 300px; }
.aw-opps .aw-ls__statetext strong { font-size: 14px; color: var(--ink); font-weight: 700; }
.aw-opps .aw-ls__statetext > span { font-size: 13px; line-height: 1.5; color: var(--ink-2); }

/* A ghost button. The theme owns bare <a>/<button>, so this is written long. */
.aw-opps .aw-ls__ghost,
.aw-opps a.aw-ls__ghost {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px;
	background: transparent; color: var(--ink);
	font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
	white-space: nowrap; transition: border-color 140ms, color 140ms;
}
.aw-opps .aw-ls__ghost:hover,
.aw-opps a.aw-ls__ghost:hover { border-color: var(--gold); color: var(--gold-link); }

/* ------------------------------------------------------------------- hero */
.aw-opps .aw-ls__hero {
	display: flex; flex-wrap: wrap; align-items: stretch; gap: 28px;
	background: var(--s3); border: 1px solid var(--rule); border-radius: 16px;
	padding: clamp(20px, 4vw, 36px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
	animation: aw-ls-in 320ms var(--ease) both;
}
@keyframes aw-ls-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.aw-opps .aw-ls__heroleft { flex: 999 1 520px; min-width: 0; display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.aw-opps .aw-ls__tile {
	flex: none; width: 84px; height: 84px; border-radius: 16px; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	font-size: 24px; font-weight: 700; color: var(--ink);
}
.aw-opps .aw-ls__tile img { width: 72%; height: 72%; object-fit: contain; display: block; }
.aw-opps .aw-ls__tile--sm { width: 56px; height: 56px; border-radius: 12px; font-size: 16px; }

.aw-opps .aw-ls__id { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aw-opps .aw-ls__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-opps .aw-ls__chips--tags { padding-top: 2px; }
.aw-opps .aw-ls__chip {
	display: inline-flex; align-items: center; gap: 6px;
	height: 24px; padding: 0 10px; border-radius: 999px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap;
}
.aw-opps .aw-ls__chips--tags .aw-ls__chip { height: 26px; padding: 0 11px; font-size: 11px; letter-spacing: 0; }

.aw-opps .aw-ls h1,
.aw-opps .aw-ls__id h1 {
	font-family: var(--display) !important; font-weight: 400;
	font-size: clamp(34px, 5vw, 56px); line-height: 1.02; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--ink); text-wrap: balance; margin: 0;
}
.aw-opps .aw-ls__raw { font-size: 12px; color: var(--ink-4); }
.aw-opps .aw-ls__studioline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--ink-2); }
.aw-opps .aw-ls__studioline strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.aw-opps .aw-ls__studioline > span { display: flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------- the description */
.aw-opps .aw-ls__desc {
	max-width: 720px; box-sizing: border-box; border-radius: 12px;
	background: var(--s1); border: 1px solid var(--rule); overflow: hidden;
}
.aw-opps .aw-ls__descbody { padding: 16px 18px 0; display: flex; flex-direction: column; gap: 6px; }
.aw-opps .aw-ls__lab { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-4); text-transform: uppercase; }
.aw-opps .aw-ls__lab--gold { font-size: 11px; color: var(--gold-link); }
/* Collapsed to the design's 70px, opened to 600px. max-height, not height, so the
   transition runs without measuring and without a layout jump when the text is short. */
/* ⚠️ THE CLAMP HAS TO FIT A NORMAL SUMMARY (Harvey, 14 Oct 2026: "there's no reason to show
   less if the text for the role is going to be this long: just show less when the text is very
   long"). It was 70px, and every summary on the board runs 84 to 159px, so the control appeared
   on all 39 listings and revealed one or two lines. Our summaries are generated and bounded:
   38 to 59 words, three to six lines. 190px is eight lines at this size, which holds every one
   of them whole and still clamps a genuinely long post.
   ⚠️ opportunities.js reads this value off the element rather than carrying its own copy. It
   used to test against a literal 70, so changing the number here alone would leave the toggle
   hidden on text that is actually cut off. Change it here; nothing else needs touching. */
.aw-opps .aw-ls__desctext {
	display: flex; flex-direction: column; gap: 10px;
}
/* Only a summary single.php judged long carries the clamp. Without the class there is no
   max-height at all, so nothing is hidden and no control is drawn. */
.aw-opps .aw-ls__desc--clamp .aw-ls__desctext {
	max-height: 190px; overflow: hidden;
	transition: max-height 320ms var(--ease);
}
.aw-opps .aw-ls__desc--clamp.is-open .aw-ls__desctext { max-height: 1200px; }
.aw-opps .aw-ls__desctext p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.aw-opps .aw-ls__desctext p.is-none { color: var(--ink-3); }
.aw-opps .aw-ls__descfoot {
	margin-top: 12px; padding: 10px 18px; border-top: 1px solid var(--rule-2);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.aw-opps .aw-ls__descfoot button {
	display: flex; align-items: center; gap: 6px;
	padding: 0; border: 0; background: transparent; color: var(--gold-link);
	font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer;
}
.aw-opps .aw-ls__descfoot button:hover { color: var(--gold-hi); }
.aw-opps .aw-ls__descfoot button svg { transition: transform 220ms var(--ease); }
.aw-opps .aw-ls__desc.is-open .aw-ls__descfoot button svg { transform: rotate(180deg); }
.aw-opps .aw-ls__credit { font-size: 11px; color: var(--ink-4); }

/* ------------------------------------------------------------- fact grid */
.aw-opps .aw-ls__facts {
	display: grid; flex: 1 1 320px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr; align-content: stretch;
	gap: 1px; background: var(--rule); border: 1px solid var(--rule);
	border-radius: 12px; overflow: hidden;
}
.aw-opps .aw-ls__fact { background: var(--s1); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.aw-opps .aw-ls__factk { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-4); }
.aw-opps .aw-ls__factv { font-size: 14px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__factv.is-none { color: var(--ink-3); font-weight: 400; }
.aw-opps .aw-ls__factn { font-size: 11px; color: var(--ink-3); }

/* ------------------------------------------------------------------- body */
.aw-opps .aw-ls__body { display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.aw-opps .aw-ls__main { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* order:-1 puts the apply panel first once the row wraps, so on a phone the apply
   button is above the reading, which is what the design does. */
.aw-opps .aw-ls__aside { flex: 1 1 300px; order: -1; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }

.aw-opps .aw-ls__card {
	background: var(--s3); border: 1px solid var(--rule); border-radius: 14px;
	padding: 24px; display: flex; flex-direction: column; gap: 18px;
}
.aw-opps .aw-ls h2,
.aw-opps .aw-ls__card h2,
.aw-opps .aw-ls__more h2 {
	font-family: var(--display) !important; font-weight: 400;
	font-size: 28px; line-height: 1.1; letter-spacing: 0.02em;
	text-transform: uppercase; color: var(--ink); margin: 0;
}
.aw-opps .aw-ls__foot { font-size: 12px; line-height: 1.5; color: var(--ink-4); }
.aw-opps .aw-ls__none { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }

/* ------------------------------------------------------------ how you match */
.aw-opps .aw-ls__match { padding: 0; gap: 0; overflow: hidden; }
.aw-opps .aw-ls__matchhead {
	padding: 22px 24px; background: var(--gold-field); border-bottom: 1px solid var(--gold-rule);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.aw-opps .aw-ls__matchintro { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; }
.aw-opps .aw-ls__matchwhy { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.aw-opps .aw-ls__tally { display: flex; gap: 6px; }
.aw-opps .aw-ls__tallycell {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	min-width: 64px; padding: 10px 8px; border-radius: 10px;
	background: var(--s1); border: 1px solid var(--rule);
}
.aw-opps .aw-ls__tallycell strong { font-size: 20px; font-weight: 700; }
.aw-opps .aw-ls__tallycell span { font-size: 10px; color: var(--ink-3); }
.aw-opps .aw-ls__matchrows { padding: 6px 24px 10px; }
.aw-opps .aw-ls__matchrow {
	display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center;
	padding: 14px 0; border-bottom: 1px solid var(--rule-2);
}
.aw-opps .aw-ls__matchrow:last-child { border-bottom: 0; }
.aw-opps .aw-ls__matchicon {
	width: 26px; height: 26px; border-radius: 50%; border: 1px solid;
	display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.aw-opps .aw-ls__matchtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aw-opps .aw-ls__matchtext strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__matchtext span { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.aw-opps .aw-ls__matchlabel { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-align: right; }
.aw-opps .aw-ls__matchfoot {
	padding: 14px 24px 20px; display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between; gap: 10px;
}
.aw-opps .aw-ls__matchfoot span { font-size: 12px; color: var(--ink-4); }
.aw-opps .aw-ls__matchfoot a { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }

/* ------------------------------------------------------- the role in short */
.aw-opps .aw-ls__duties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.aw-opps .aw-ls__duty { display: flex; gap: 12px; padding: 16px; border-radius: 10px; background: var(--s1); border: 1px solid var(--rule-2); }
.aw-opps .aw-ls__dutyn {
	flex: none; width: 30px; height: 30px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.aw-opps .aw-ls__dutytext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aw-opps .aw-ls__dutytext strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__dutytext span { font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* ----------------------------------------------------------------- skills */
.aw-opps .aw-ls__skillgroup { display: flex; flex-direction: column; gap: 10px; }
.aw-opps .aw-ls__skillgroup .aw-ls__lab { font-size: 11px; color: var(--ink-3); }
.aw-opps .aw-ls__skills { display: flex; flex-wrap: wrap; gap: 8px; }
.aw-opps .aw-ls__skill {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 14px; border-radius: 999px;
	font-size: 12px; font-weight: 700;
	background: #1F1F1F; color: var(--ink); border: 1px solid var(--line);
}
.aw-opps .aw-ls__skill.is-mine { background: var(--gold-tint); color: var(--gold-link); border-color: var(--gold); }
.aw-opps .aw-ls__skill--bonus { background: transparent; color: var(--ink-2); border: 1px dashed var(--line); }
.aw-opps .aw-ls__legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-ls__legend i { width: 14px; height: 14px; border-radius: 999px; background: var(--gold-tint); border: 1px solid var(--gold); }

/* ----------------------------------------------------------- how to apply */
.aw-opps .aw-ls__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.aw-opps .aw-ls__steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; }
.aw-opps .aw-ls__rail { display: flex; flex-direction: column; align-items: center; }
.aw-opps .aw-ls__stepn {
	width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
	background: var(--s1); color: var(--ink-2);
	display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.aw-opps .aw-ls__stepn.is-first { background: var(--gold); color: #141414; border-color: var(--gold); }
.aw-opps .aw-ls__raila { flex: 1; width: 1px; min-height: 18px; background: var(--rule); }
.aw-opps .aw-ls__steptext { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 20px; }
.aw-opps .aw-ls__steptext strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__steptext span { font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* ------------------------------------------------------- about the studio */
.aw-opps .aw-ls__studio { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.aw-opps .aw-ls__studiotext { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.aw-opps .aw-ls__studiotext strong { font-size: 16px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__studiotext span { font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.aw-opps .aw-ls__studio .aw-ls__ghost { height: 40px; }

/* ---------------------------------------------------------- more like this */
.aw-opps .aw-ls__more { display: flex; flex-direction: column; gap: 14px; }
.aw-opps .aw-ls__moregrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aw-opps .aw-ls__morecard {
	display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 12px;
	background: var(--s3); border: 1px solid var(--rule); color: var(--ink);
	transition: transform 200ms var(--ease), border-color 160ms;
}
.aw-opps .aw-ls__morecard:hover { transform: translateY(-2px); border-color: var(--gold-rule); color: var(--ink); }
.aw-opps .aw-ls__morestudio { display: flex; align-items: center; gap: 10px; }
.aw-opps .aw-ls__morestudio > span:last-child { font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-ls__moretile {
	width: 36px; height: 36px; border-radius: 9px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; color: var(--ink);
}
.aw-opps .aw-ls__moretile img { width: 74%; height: 74%; object-fit: contain; display: block; }
.aw-opps .aw-ls__morecard strong { font-size: 15px; line-height: 1.3; font-weight: 700; }
.aw-opps .aw-ls__moreloc { font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-ls__moretag {
	align-self: flex-start; height: 22px; padding: 0 9px; border-radius: 999px;
	display: inline-flex; align-items: center; font-size: 10px; font-weight: 700; border: 1px solid;
}

/* ------------------------------------------------------------ apply panel */
.aw-opps .aw-ls__apply {
	background: var(--s5); border: 1px solid var(--rule); border-radius: 16px; padding: 22px;
	display: flex; flex-direction: column; gap: 16px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.aw-opps .aw-ls__applybox { display: flex; flex-direction: column; gap: 12px; }
/* ⚠️ min-height + line-height 1.3, never a fixed height: "APPLY ON DREAMWORKS ANIMATION /
   NBCUNIVERSAL" wraps to two lines and a fixed height would clip it. */
.aw-opps .aw-ls__go,
.aw-opps a.aw-ls__go {
	min-height: 52px; box-sizing: border-box; padding: 10px 18px; border-radius: 6px;
	background: var(--gold); color: #141414;
	font-family: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
	line-height: 1.3; text-align: center;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	transition: background 120ms;
}
.aw-opps .aw-ls__go:hover,
.aw-opps a.aw-ls__go:hover { background: var(--gold-link); color: #141414; }
.aw-opps .aw-ls__go svg { flex: none; }
.aw-opps .aw-ls__never { font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.aw-opps .aw-ls__closed {
	display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px;
	background: var(--s1); border: 1px solid var(--rule);
}
.aw-opps .aw-ls__closed strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-ls__closed span { font-size: 12px; line-height: 1.5; color: var(--ink-3); }

.aw-opps .aw-ls__boardpick { display: flex; flex-direction: column; gap: 8px; }
.aw-opps .aw-ls__boardpick .aw-ls__lab { font-size: 11px; color: var(--ink-3); }
.aw-opps .aw-ls__picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.aw-opps .aw-ls__picker button {
	height: 38px; border-radius: 6px; border: 1px solid var(--line); background: transparent;
	color: var(--ink-2); font-family: var(--text); font-size: 11px; font-weight: 700; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	transition: border-color 140ms, background 140ms, color 140ms;
}
.aw-opps .aw-ls__picker button:hover { border-color: var(--gold); }
.aw-opps .aw-ls__picker button.is-on { background: var(--gold-tint); color: var(--gold-link); border-color: var(--gold); }
.aw-opps .aw-ls__picker button i { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.aw-opps .aw-ls__acts { display: flex; gap: 8px; }
.aw-opps .aw-ls__acts button {
	flex: 1; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: transparent;
	color: var(--ink); font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
	cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
	transition: border-color 140ms, color 140ms;
}
.aw-opps .aw-ls__acts button:hover { border-color: var(--gold); color: var(--gold-link); }
.aw-opps .aw-ls__acts button.is-on { color: var(--gold-link); border-color: var(--gold); }

.aw-opps .aw-ls__trust { border-top: 1px solid var(--rule); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.aw-opps .aw-ls__trust > div { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.aw-opps .aw-ls__trust > div > span:first-child { color: var(--ink-3); }
.aw-opps .aw-ls__trust > div > span:last-child { font-weight: 700; text-align: right; }

.aw-opps .aw-ls__advice {
	display: flex; gap: 12px; padding: 16px 18px; border-radius: 12px;
	background: var(--teal-tint); border: 1px solid #1F4F4B;
}
.aw-opps .aw-ls__advice svg { flex: none; margin-top: 1px; }
.aw-opps .aw-ls__advice span { font-size: 12px; line-height: 1.55; color: var(--ink); }

/* ------------------------------------------------------------- narrow screens */
@media (max-width: 782px) {
	.aw-opps .aw-ls__aside { position: static; }
	.aw-opps .aw-ls__hero { padding: 20px; }
	.aw-opps .aw-ls__facts { flex-basis: 100%; }
	.aw-opps .aw-ls__matchhead,
	.aw-opps .aw-ls__matchrows,
	.aw-opps .aw-ls__matchfoot { padding-left: 16px; padding-right: 16px; }
	.aw-opps .aw-ls__card { padding: 18px; }
}

/* Reduced motion: the hero still arrives, the description still opens, but nothing travels. */
@media (prefers-reduced-motion: reduce) {
	.aw-opps .aw-ls__hero { animation: none; }
	.aw-opps .aw-ls__desctext { transition: none; }
	.aw-opps .aw-ls__morecard { transition: border-color 160ms; }
	.aw-opps .aw-ls__morecard:hover { transform: none; }
}

/* ======================================================= type, matched to the site
 * Harvey, 13 Oct 2026: "make sure all text overall is the same dimensions and style as the
 * rest of the website."
 *
 * MEASURED FIRST, on real pages. The family was already right: anim.works runs LM Pro for
 * body copy everywhere, and this module already did. What did not match was SIZE. Running
 * prose on the home page, /about-us/ and /mentors/ sits at 15 to 16px; the handoff draws
 * this module's prose at 12 to 14px.
 *
 * ⚠️ THIS BLOCK DELIBERATELY DEPARTS FROM THE HANDOFF, and only here, so it can be removed
 *    in one piece. It lifts RUNNING PROSE (sentences someone reads) to the site's floor.
 *    It does NOT touch labels, chips, tags, table meta, buttons or the fact grid: those are
 *    chrome, and the rest of the site runs chrome at 11 to 13px too, so they already match.
 *    Delete this block to go back to the handoff's sizes exactly. */

.aw-opps .aw-ls__desctext p { font-size: 15px; }
.aw-opps .aw-ls__matchwhy { font-size: 14px; }
.aw-opps .aw-ls__matchtext span { font-size: 13px; }
.aw-opps .aw-ls__dutytext span { font-size: 13px; }
.aw-opps .aw-ls__steptext span { font-size: 13px; }
.aw-opps .aw-ls__studiotext span { font-size: 15px; }
.aw-opps .aw-ls__never { font-size: 13px; }
.aw-opps .aw-ls__none { font-size: 15px; }
.aw-opps .aw-ls__advice span { font-size: 13px; }
.aw-opps .aw-ls__statetext > span { font-size: 14px; }

/* ===================================================== response on the press
 * An /apple-design pass, 13 Oct 2026. The principle it is built on is the first one in
 * "Designing Fluid Interfaces": respond on pointer-DOWN, not on release. Before this the
 * module had 37 transitions and not one :active rule, so every control felt dead at the
 * moment of contact even though its result arrived instantly.
 *
 * Deliberately subtle and fast. These are controls someone uses many times in a sitting,
 * and the frequency tier argues for near-imperceptible motion, not a bounce.
 * Only transform is animated, so none of this touches layout. */

.aw-opps :is(button, .aw-ls__go, .aw-ls__ghost, .aw-mk__hit, .aw-card__chev, [data-aw-card]) {
	/* The browser's own grey flash would fight the press state below. */
	-webkit-tap-highlight-color: transparent;
}

.aw-opps :is(
	.aw-ls__picker button,
	.aw-ls__acts button,
	.aw-ls__descfoot button,
	.aw-sp__out button,
	.aw-qz__seg
):active { transform: scale(0.97); }

.aw-opps :is(.aw-ls__go, .aw-ls__ghost):active { transform: scale(0.985); }
.aw-opps .aw-mk__hit:active { transform: scale(0.97); }

.aw-opps :is(
	.aw-ls__picker button,
	.aw-ls__acts button,
	.aw-ls__descfoot button,
	.aw-sp__out button,
	.aw-ls__go,
	.aw-ls__ghost,
	.aw-mk__hit,
	.aw-qz__seg
) {
	transition: transform 140ms var(--ease), border-color 140ms, background 140ms, color 140ms;
	will-change: transform;
}

/* Hover lifts belong to devices that actually hover. On a touch screen :hover sticks after
   a tap, which leaves a card raised with no way to put it down. */
@media (hover: none) {
	.aw-opps .aw-ls__morecard:hover { transform: none; }
}

/* ------------------------------------------------- the search list, from its field
 * Spatial consistency: the suggestions grow out of the field they belong to rather than
 * appearing beside it, so the relationship is visible rather than inferred. */
.aw-opps .aw-sp__out {
	transform-origin: top center;
	animation: aw-pop 150ms var(--ease) both;
}
@keyframes aw-pop {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------- the market list, without a jump
 * Opacity only, no travel: this is a list someone is reading, and moving it would make it
 * harder to read, not easier. The outgoing list is simply replaced; only the arriving one
 * is bridged. */
.aw-opps [data-aw-drill]:not([hidden]) { animation: aw-fade 160ms var(--ease) both; }
@keyframes aw-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------ the bookmark, filling up
 * State indication. The icon is always the filled path; saving reveals it from the bottom,
 * so the control shows what changed instead of swapping one glyph for another. */
.aw-opps .aw-ls__acts button[data-aw-save] svg { transition: clip-path 180ms var(--ease); }
.aw-opps .aw-ls__acts button[data-aw-save] svg { clip-path: inset(100% 0 0 0); }
.aw-opps .aw-ls__acts button[data-aw-save].is-on svg { clip-path: inset(0 0 0 0); }

/* Reduced motion: gentler, never nothing. A press still answers, it just does not travel.
   Apple's own guidance is a non-vestibular equivalent, not silence. */
@media (prefers-reduced-motion: reduce) {
	.aw-opps :is(
		.aw-ls__picker button, .aw-ls__acts button, .aw-ls__descfoot button,
		.aw-sp__out button, .aw-ls__go, .aw-ls__ghost, .aw-mk__hit, .aw-qz__seg
	):active { transform: scale(0.99); }
	.aw-opps .aw-sp__out { animation: aw-fade 120ms linear both; }
	.aw-opps [data-aw-drill]:not([hidden]) { animation: aw-fade 120ms linear both; }
	.aw-opps .aw-ls__acts button[data-aw-save] svg { transition: none; }
}

/* ===================================================== the wide layout, 14 Oct 2026
 * Built from "Animworks Opportunities Signed In.dc.html" in opportunities-wide-handoff,
 * measured in the DOM rather than taken from the README's prose.
 *
 * The design's own numbers, read off its rendered page at a 1545px viewport:
 *   every top-level container  max-width 1520px, margin 0 auto, padding 0 24px
 *   board area grid            repeat(auto-fill, minmax(300px,1fr)), gap 32px 16px
 *                              which resolves to four 356px tracks at that width
 *   main column                grid-column 1 / -2   (1100px)
 *   right rail                 grid-column -2 / -1  (356px), static, no inner scroll
 *
 * ⚠️ ONE DELIBERATE DIFFERENCE. The design pads its containers by 24px; ours use 15px, so
 * the card edges stay flush with the real menu bar's first and last items, which is what
 * Harvey asked for on 13 Oct with a drawing. The design's README states its own intent as
 * "matching the live header and menu bar", and on this theme 15px is the number that does
 * that, because WoodMart's container pads by 15px and not 24px. Everything inside is the
 * design's own value. */

/* ------------------------------------------------------------- the board area grid */
.aw-opps .aw-board {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 32px 16px;
	align-items: start;
	padding-top: 32px;
	padding-bottom: 96px;
}
.aw-opps .aw-board__main { grid-column: 1 / -2; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
/* Board view drops the rail, so the list takes every track. */
.aw-opps .aw-board.is-board .aw-board__main { grid-column: 1 / -1; }
.aw-opps .aw-board__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* One track: the rail stacks under the list and both run full width. */
@media (max-width: 680px) {
	.aw-opps .aw-board__main,
	.aw-opps .aw-rail { grid-column: 1 / -1; }
}

/* --------------------------------------------------------- studios hiring now (4.6b) */
.aw-opps .aw-studios { padding-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.aw-opps .aw-studios__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.aw-opps .aw-studios__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-link); margin-bottom: 6px; }
.aw-opps .aw-studios h2 { font-family: var(--display) !important; font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); margin: 0; }
.aw-opps .aw-studios__count { font-size: 13px; color: var(--ink-4); }

/* ⚠️ IDENTICAL to .aw-board's columns and column gap. That is the whole point of this
   section: Harvey asked for these tiles and the boxes below to line up perfectly. Change
   one and you must change the other. */
.aw-opps .aw-studios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	/* ⚠️ NO align-items here. The design leaves it at the grid default so every tile in a row
	   is the same height (measured: all 365px). Setting `start`, as the board area does,
	   makes the row ragged. The board area wants `start`; this grid does not. */
}
/* ⚠️ COMPACT, 14 Oct 2026. Harvey: "Make these blocks smaller, at the moment they take quite
   a lot of page space." FULL-SPEC 4.6b: padding 14px 16px, gap 10px, 36px logo, 20px count,
   one meta line instead of a city chip row, and the newest role only. The target is roughly
   half the previous height; measured, it went from 308px to about 150px. */
.aw-opps .aw-studio {
	display: flex; flex-direction: column; gap: 10px;
	padding: 14px 16px; border-radius: 12px;
	background: var(--s3); border: 1px solid var(--rule);
}
/* The single role row takes the slack, so tiles in a row still end level. */
.aw-opps .aw-studio__roles { flex: 1; }
.aw-opps .aw-studio__top { display: flex; align-items: flex-start; gap: 12px; }
.aw-opps .aw-studio__tile {
	flex: none; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	font-size: 13px; font-weight: 700; color: var(--ink);
}
.aw-opps .aw-studio__tile img { width: 70%; height: 70%; object-fit: contain; display: block; }
.aw-opps .aw-studio__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aw-opps .aw-studio__id strong { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.aw-opps .aw-studio__id > span { font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-studio__open { flex: none; display: flex; flex-direction: column; align-items: center; }
.aw-opps .aw-studio__open b { font-size: 20px; font-weight: 700; color: var(--gold-link); line-height: 1; }
.aw-opps .aw-studio__open span { font-size: 10px; color: var(--ink-3); }
.aw-opps .aw-studio__roles { display: flex; flex-direction: column; }
.aw-opps .aw-studio__roles a {
	display: flex; flex-direction: column; gap: 2px; padding: 8px 0;
	border-top: 1px solid var(--rule-2); color: var(--ink);
}
.aw-opps .aw-studio__roles a:hover { color: var(--gold-link); }
.aw-opps .aw-studio__role { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.aw-opps .aw-studio__when { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.aw-opps .aw-studio__new {
	font-style: normal; height: 16px; padding: 0 6px; border-radius: 999px;
	display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; background: #10302A; color: var(--mint); border: 1px solid #1F5A4E;
}
.aw-opps .aw-studio__more { font-size: 11px; color: var(--ink-4); }

/* ------------------------------------------ the market roles and profile row (4.6a) */
.aw-opps .aw-mkrow { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 0 24px; }
.aw-opps .aw-mkrow__table { flex: 999 1 560px; min-width: 0; }
.aw-opps .aw-mkrow__side { flex: 1 1 300px; min-width: 0; }
.aw-opps .aw-mkrow__side .aw-side { position: static; width: 100%; }

/* ------------------------------------------------------ your applications (4.7b) */
.aw-opps .aw-apps {
	background: var(--s3); border: 1px solid var(--rule); border-radius: 12px;
	padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.aw-opps .aw-apps__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.aw-opps .aw-apps__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-link); }
.aw-opps .aw-apps__sum { font-size: 13px; color: var(--ink-2); }
.aw-opps .aw-apps__open,
.aw-opps a.aw-apps__open {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; padding: 0 16px; border-radius: 6px;
	border: 1px solid var(--teal); background: transparent; color: var(--teal-ink);
	font-size: 11px; font-weight: 700; letter-spacing: 0.1em; white-space: nowrap;
	transition: border-color 140ms, color 140ms;
}
.aw-opps .aw-apps__open:hover { border-color: var(--teal-hi); color: var(--teal-ink); }
.aw-opps .aw-apps__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aw-opps .aw-apps__col { display: flex; flex-direction: column; gap: 8px; }
.aw-opps .aw-apps__collab { display: flex; align-items: center; gap: 8px; }
.aw-opps .aw-apps__collab i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.aw-opps .aw-apps__collab strong { font-size: 12px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-apps__collab b { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.aw-opps .aw-apps__card {
	display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px;
	background: var(--s1); border: 1px solid var(--rule-2); color: var(--ink);
	transition: border-color 140ms;
}
.aw-opps .aw-apps__card:hover { border-color: var(--gold-rule); color: var(--ink); }
.aw-opps .aw-apps__card strong { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.aw-opps .aw-apps__card > span { font-size: 11px; color: var(--ink-3); }
.aw-opps .aw-apps__next { font-size: 11px; font-weight: 700; }
.aw-opps .aw-apps__empty { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-4); }
.aw-opps .aw-apps__more { font-size: 11px; color: var(--ink-4); }

/* ------------------------------------------------------------------ the rail (4.12) */
/* ⚠️ NOT sticky, no max-height, no overflow. Harvey: "Make this full column fully
   displayed, at the moment we have to scroll the column." */
.aw-opps .aw-rail {
	grid-column: -2 / -1; min-width: 0;
	display: flex; flex-direction: column; gap: 20px;
	position: static; max-height: none; overflow: visible;
}
.aw-opps .aw-rail__card {
	background: var(--s3); border: 1px solid var(--rule); border-radius: 12px;
	padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.aw-opps .aw-rail__head { display: flex; flex-direction: column; gap: 4px; }
.aw-opps .aw-rail__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-link); }
.aw-opps .aw-rail__head strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.aw-opps .aw-rail__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aw-opps .aw-rail__tabs button {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 10px 6px; border-radius: 10px; cursor: pointer;
	background: var(--s1); border: 1px solid var(--rule); color: var(--ink-3);
	font-family: var(--text); transition: background 140ms, border-color 140ms, transform 140ms var(--ease);
}
.aw-opps .aw-rail__tabs button:active { transform: scale(0.97); }
.aw-opps .aw-rail__tabs button.is-on { background: var(--rule-2); border-color: var(--line); }
.aw-opps .aw-rail__tabs button b { font-size: 18px; font-weight: 700; }
.aw-opps .aw-rail__tabs button span { font-size: 10px; }
.aw-opps .aw-rail__list { display: flex; flex-direction: column; }
.aw-opps .aw-rail__row {
	display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
	border-top: 1px solid var(--rule-2); color: var(--ink);
}
.aw-opps .aw-rail__list .aw-rail__row:first-child { border-top: 0; }
.aw-opps .aw-rail__row i { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-top: 6px; }
.aw-opps .aw-rail__row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-opps .aw-rail__row strong { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.aw-opps .aw-rail__row span span { font-size: 11px; color: var(--ink-3); }
.aw-opps a.aw-rail__row:hover strong { color: var(--gold-link); }
/* A closed listing is struck through and is deliberately not a link: nothing to apply to. */
.aw-opps .aw-rail__row.is-closed strong { text-decoration: line-through; color: var(--ink-3); font-weight: 400; }
.aw-opps .aw-rail__none { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-4); }
.aw-opps .aw-rail__note { font-size: 11px; line-height: 1.55; color: var(--ink-4); }
.aw-opps .aw-rail__group { display: flex; flex-direction: column; gap: 8px; }
.aw-opps .aw-rail__lab { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.aw-opps .aw-rail__skill { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
/* ⚠️ The name keeps flex:1 and min-width:0 with an ellipsis and the pill is flex:none, so a
   long discipline name never squeezes the Yours pill out of the row, or itself to nothing. */
.aw-opps .aw-rail__skill > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-opps .aw-rail__skill em {
	flex: none; font-style: normal; height: 16px; padding: 0 6px; border-radius: 999px;
	display: inline-flex; align-items: center; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; background: var(--gold-tint); color: var(--gold-link); border: 1px solid var(--gold);
}
.aw-opps .aw-rail__bar { flex: none; width: 72px; height: 6px; border-radius: 999px; background: var(--rule-2); overflow: hidden; }
.aw-opps .aw-rail__bar i { display: block; height: 100%; background: #4A4A4A; border-radius: 999px; }
.aw-opps .aw-rail__skill.is-mine > span:first-child { color: var(--gold-link); }
.aw-opps .aw-rail__skill.is-mine .aw-rail__bar i { background: var(--gold); }
.aw-opps .aw-rail__skill b { flex: none; width: 22px; text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-3); }
.aw-opps .aw-rail__searches { display: flex; flex-direction: column; gap: 10px; }
.aw-opps .aw-rail__search { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.aw-opps .aw-rail__search > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aw-opps .aw-rail__search strong { font-size: 13px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.aw-opps .aw-rail__search span span { font-size: 11px; color: var(--ink-3); }
.aw-opps .aw-rail__tag { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }

/* The alert switch: 40 x 22, knob slides in 180ms. */
.aw-opps .aw-sw {
	flex: none; width: 40px; height: 22px; border-radius: 999px; padding: 0; cursor: pointer;
	background: var(--line); border: 0; position: relative;
	transition: background 180ms var(--ease);
}
.aw-opps .aw-sw i {
	position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--ink); transition: transform 180ms var(--ease);
}
.aw-opps .aw-sw.is-on { background: var(--teal); }
.aw-opps .aw-sw.is-on i { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) {
	.aw-opps .aw-sw, .aw-opps .aw-sw i { transition: none; }
}

/* ============================== no white highlight anywhere in this module
 * Harvey, 14 Oct 2026: "can we make sure we don't do the white highlight on the individual
 * modules and keep it the same as the original design."
 *
 * ⚠️ THE CAUSE, measured not guessed. WoodMart's base.css carries:
 *     :is(.btn, .button, button, [type="submit"], [type="button"]):hover {
 *       color: var(--btn-color-hover, var(--btn-color, #3E3E3E));
 *       background-color: var(--btn-bgcolor-hover, var(--btn-bgcolor, #e0e0e0)); }
 * Those variables are UNSET on our pages, so every bare <button> in the module fell back to
 * a #e0e0e0 plate with #3E3E3E text on hover. The role card's head is a <button>, which is
 * why hovering a listing washed the whole row out. Scoping the RESTING state was done
 * earlier; the :hover variant was not.
 *
 * ⚠️ The fix is to define the variables rather than to fight the specificity. The theme's own
 * rule then resolves to these values inside .aw-opps, every explicit background we declare
 * still wins where we declare one, and nothing needs !important.
 *
 * The design never uses a light background on hover anywhere: its full set is
 * #1F1F1F, #363636, #181818, rgba(255,255,255,0.03), and the ambers. */
.aw-opps {
	--btn-bgcolor: transparent;
	--btn-bgcolor-hover: transparent;
	--btn-color: #F2F0EA;
	--btn-color-hover: #F2F0EA;
	--btn-brd-color: #3A3A3A;
	--btn-brd-color-hover: #E4AC01;
}

/* A role card's head: the design's own subtle row hover, not a plate. */
.aw-opps .aw-card__head:hover,
.aw-opps .aw-card__head:focus-visible {
	background: rgba(255, 255, 255, 0.03);
	color: inherit;
}

/* ⚠️ Buttons that carry their own resting background need their hover stated too, or the
   theme's hover rule above resolves to transparent and they lose it mid-gesture. These are
   every such button in the module; add to this list if another one gains a background. */
.aw-opps .aw-heat__race:hover { background: var(--gold-tint); color: var(--gold-link); }
.aw-opps .aw-seg a:hover { background: transparent; }
.aw-opps .aw-seg a.is-on:hover { background: var(--gold); color: #141414; }
.aw-opps .aw-qz__seg:hover { background: var(--rule); }
.aw-opps .aw-rail__tabs button.is-on:hover { background: var(--rule-2); }
.aw-opps .aw-sw:hover { background: var(--line); }
.aw-opps .aw-sw.is-on:hover { background: var(--teal); }
.aw-opps .aw-ls__picker button.is-on:hover { background: var(--gold-tint); }

/* ======================================== the market cubes (FULL-SPEC 4.6, 14 Oct 2026)
 * ⚠️ THE ONLY CUBE MOTION IS THESE TWO THINGS. The spec is explicit: the selected block lifts
 * 6px over 220ms, the face colours fade over 300ms when the selection changes, the label
 * button takes a rgba(255,255,255,0.03) hover tint, and there is "no idle, spinning,
 * bouncing or load-in animation on the cubes".
 * An amber press ring was added on 14 Oct from a reading of Harvey's recording; this spec
 * supersedes it, so it has been removed rather than left in as an extra.
 *
 * Three colour sets and no others, which is why the faces are painted from custom properties
 * the markup sets: selection must recolour a cube with no page load, and a fill baked into
 * the attribute could only change on a reload. */
.aw-opps .aw-cube__shadow { fill: #141414; }
.aw-opps .aw-cube__left   { fill: var(--left); }
.aw-opps .aw-cube__right  { fill: var(--right); }
.aw-opps .aw-cube__roof   { fill: var(--roof); }
.aw-opps .aw-cube.is-on .aw-cube__left  { fill: var(--left-on); }
.aw-opps .aw-cube.is-on .aw-cube__right { fill: var(--right-on); }
.aw-opps .aw-cube.is-on .aw-cube__roof  { fill: var(--roof-on); }
.aw-opps .aw-cube polygon { transition: fill 300ms var(--ease); }

/* The selected block lifts. The ground shadow stays put, so the block reads as rising off it
   rather than the whole column sliding. */
.aw-opps .aw-cube__left,
.aw-opps .aw-cube__right,
.aw-opps .aw-cube__roof { transition: fill 300ms var(--ease), transform 220ms var(--ease); }
.aw-opps .aw-cube.is-on .aw-cube__left,
.aw-opps .aw-cube.is-on .aw-cube__right,
.aw-opps .aw-cube.is-on .aw-cube__roof { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	.aw-opps .aw-cube polygon,
	.aw-opps .aw-cube__left,
	.aw-opps .aw-cube__right,
	.aw-opps .aw-cube__roof { transition: fill 300ms var(--ease); }
	/* The colour still reports the selection; only the travel goes. */
	.aw-opps .aw-cube.is-on .aw-cube__left,
	.aw-opps .aw-cube.is-on .aw-cube__right,
	.aw-opps .aw-cube.is-on .aw-cube__roof { transform: none; }
}

/* ================================================================ APPLICATION TRACKER
   tracker-handoff, 14 Oct 2026. Every value is the design's own; where the design sets a
   number inline on an element it is written here once instead.
   Surfaces: page #111111 · column #151515 · deck card #1C1C1C (border #2F2F2F)
   Radii: deck 14 · columns 16 · board cards 12 · why box 10 · buttons 6 · tags 999
   Easing is the site's var(--ease), which is the design's cubic-bezier(0.22,1,0.36,1). */

.aw-opps.aw-trk .aw-opps__wrap { display: flex; flex-direction: column; gap: 40px; padding-top: 36px; padding-bottom: 96px; }

/* ⚠️ THE BROWSER'S OWN [hidden] IS NOT ENOUGH HERE, same trap as the drill-down's <details>:
   [hidden]{display:none} is a UA rule and any author `display` beats it, so every one of the
   64 deck cards rendered at once under the first. */
.aw-opps.aw-trk [hidden] { display: none !important; }

/* ⚠️ ONLY h1 AND h2 ARE INDARUNG ON THIS PAGE (tracker-handoff section 2: Indarung for
   "YOUR TRACKER" and the two section headings, LM Pro for everything else). The module sets
   the display face on h1, h2 AND h3 with !important, which turned every match title into
   uppercase display type. The role titles are reading matter, not headings. */
.aw-opps.aw-trk h3 {
	font-family: var(--text) !important;
	font-weight: 700;
	text-transform: none;
}

/* ---------------------------------------------------------------------- the header */
.aw-trk__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.aw-trk__who { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 420px; }
.aw-trk__private { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: #2EC4A5; }
.aw-trk__id { display: flex; align-items: center; gap: 18px; }
/* 84px circle, 3px amber ring, 4px page-coloured gap, photo cover */
.aw-trk__avatar { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%;
	padding: 3px; background: #E4AC01; box-sizing: border-box; }
.aw-opps .aw-trk__avatar img { display: block; width: 100%; height: 100%; border-radius: 50%;
	object-fit: cover; border: 4px solid #111111; box-sizing: border-box; }
.aw-trk__dot { position: absolute; right: 3px; bottom: 5px; width: 16px; height: 16px; border-radius: 50%;
	background: #2EC4A5; border: 3px solid #111111; }
.aw-trk__dot.is-open { background: #9A9893; }
.aw-opps.aw-trk h1 { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.02em; color: var(--ink); margin: 0; font-size: 44px; line-height: 1; }
.aw-trk__line { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* the pipeline: one segment per column, an empty one keeps a sliver */
.aw-trk__pipe { flex: 0 1 460px; min-width: 280px; display: flex; flex-direction: column; gap: 10px; }
.aw-trk__bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #222222; gap: 2px; }
.aw-trk__bar > span { transition: flex 320ms var(--ease); }
.aw-trk__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.aw-trk__nums > div { display: flex; flex-direction: column; gap: 2px; }
.aw-trk__n { font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.aw-trk__n.is-zero { color: #8B8880; }
.aw-trk__nlab { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.aw-trk__nlab i { width: 7px; height: 7px; border-radius: 50%; }

/* ---------------------------------------------------------------- section headings */
.aw-trk__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.aw-trk__h > div { display: flex; flex-direction: column; gap: 4px; }
.aw-trk__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F5BD16; }
.aw-trk__eyebrow--grey { color: var(--ink-3); }
.aw-opps.aw-trk h2 { font-family: var(--display) !important; font-weight: 400; text-transform: uppercase;
	letter-spacing: 0.02em; color: var(--ink); margin: 0; font-size: 28px; line-height: 1.05; }
.aw-trk__meta { font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 60ch; }

/* ------------------------------------------------------------------- the deck */
.aw-trk__deckwrap,
.aw-trk__boardwrap { display: flex; flex-direction: column; gap: 16px; }
.aw-trk__deckrow { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.aw-trk__deck { flex: 999 1 560px; min-width: 0; position: relative; padding-bottom: 16px; }
/* two slim layers under the card say more are waiting */
.aw-trk__peek { position: absolute; height: 40px; border-radius: 14px; }
.aw-trk__peek--2 { left: 28px; right: 28px; bottom: 0; background: #161616; border: 1px solid #222222; }
.aw-trk__peek--1 { left: 14px; right: 14px; bottom: 8px; background: #1A1A1A; border: 1px solid #262626; }
.aw-trk__card { position: relative; background: #1C1C1C; border: 1px solid #2F2F2F; border-radius: 14px;
	padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 18px 40px rgba(0,0,0,0.45);
	transition: transform 200ms var(--ease), opacity 200ms var(--ease); }
/* the three exits the handoff draws */
.aw-trk__card.is-going-short { transform: translateY(-24px); opacity: 0; }
.aw-trk__card.is-going-no    { transform: translateX(-48px) rotate(-2deg); opacity: 0; }
.aw-trk__card.is-going-later { transform: translateX(48px) rotate(2deg); opacity: 0; }
.aw-trk__card.is-in          { animation: awTrkIn 200ms var(--ease); }
.aw-trk__card.is-next        { animation: awTrkNext 160ms var(--ease); }
.aw-trk__card.is-prev        { animation: awTrkPrev 160ms var(--ease); }
@keyframes awTrkIn   { from { transform: translateY(10px); opacity: 0; } }
@keyframes awTrkNext { from { transform: translateX(32px); opacity: 0; } }
@keyframes awTrkPrev { from { transform: translateX(-32px); opacity: 0; } }

.aw-trk__cardtop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aw-trk__fit { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.aw-trk__fit i { width: 6px; height: 6px; border-radius: 50%; }
.aw-trk__fit--strong { background: #2A2213; border: 1px solid #3A3220; color: #F5BD16; }
.aw-trk__fit--strong i { background: #F5BD16; }
.aw-trk__fit--good { background: #12332F; border: 1px solid #167A7A; color: #2BA3A3; }
.aw-trk__fit--good i { border: 1.5px solid #2BA3A3; box-sizing: border-box; }
.aw-trk__age { font-size: 12px; color: var(--ink-3); }
.aw-trk__cycle { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.aw-opps .aw-trk__cycle button { width: 36px; height: 36px; padding: 0; border: 1px solid #3A3A3A; border-radius: 6px;
	background: transparent; color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: border-color 120ms, color 120ms; }
.aw-opps .aw-trk__cycle button:hover { border-color: #E4AC01; color: #F5BD16; }
.aw-trk__cycle > span { min-width: 52px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-2);
	font-variant-numeric: tabular-nums; }

.aw-trk__idrow { display: flex; gap: 16px; align-items: flex-start; }
.aw-trk__logo { flex: none; width: 56px; height: 56px; border-radius: 12px; border: 1px solid #2A2A2A;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--ink); overflow: hidden; }
.aw-trk__logo img { width: 68%; height: 68%; object-fit: contain; }
.aw-trk__idrow > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aw-opps .aw-trk__idrow h3 { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0;
	overflow-wrap: anywhere; text-wrap: pretty; }
.aw-trk__studio { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--ink-2); }
.aw-trk__studio strong { color: var(--ink); }
.aw-trk__studio > span { color: var(--ink-3); }
.aw-trk__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-trk__why { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #151515;
	border: 1px solid #242424; border-radius: 10px; }
.aw-trk__why p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.aw-trk__why p span { color: var(--ink-3); }
.aw-trk__why .aw-trk__reach { font-size: 13px; color: var(--ink-3); }

.aw-trk__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.aw-opps .aw-trk__act { height: 44px; padding: 0 16px; border: 1px solid #3A3A3A; border-radius: 6px;
	background: transparent; color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
	transition: border-color 120ms, color 120ms, background 120ms; }
.aw-opps .aw-trk__act:hover { border-color: #5A5A5A; color: var(--ink); }
.aw-opps .aw-trk__act--gold { padding: 0 20px; border: 0; background: #E4AC01; color: #141414; }
.aw-opps .aw-trk__act--gold:hover { background: #F5BD16; color: #141414; }
.aw-opps a.aw-trk__full { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.aw-opps a.aw-trk__full:hover { color: #F5BD16; }
.aw-trk__done { border: 1px dashed #3A3A3A; border-radius: 14px; padding: 40px 24px; display: flex;
	flex-direction: column; align-items: flex-start; gap: 12px; }
.aw-trk__done strong { font-size: 17px; color: var(--ink); }
.aw-trk__done p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); max-width: 56ch; }

/* ------------------------------------------------------------------- up next */
.aw-trk__next { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.aw-trk__nextlist { display: flex; flex-direction: column; border-top: 1px solid #222222; }
.aw-opps .aw-trk__nextlist button { display: flex; align-items: center; gap: 12px; padding: 12px 0; border: 0;
	border-bottom: 1px solid #222222; background: transparent; text-align: left; cursor: pointer; width: 100%;
	transition: padding-left 160ms var(--ease); }
.aw-opps .aw-trk__nextlist button:hover { padding-left: 4px; }
.aw-trk__nextlogo { flex: none; width: 30px; height: 30px; border-radius: 7px; border: 1px solid #2A2A2A;
	display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: var(--ink); }
.aw-trk__nexttext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.aw-trk__nexttext strong { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-trk__nexttext > span { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aw-trk__fitdot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.aw-trk__nonext { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.aw-trk__keys { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #8B8880; }

/* ------------------------------------------------------------------- the board */
.aw-trk__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.aw-trk__col { background: #151515; border: 1px solid #222222; border-radius: 16px; padding: 14px;
	display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: background 200ms, border-color 200ms; }
/* the column under a dragged card, and the 700ms flash when a role arrives */
.aw-trk__col.is-over { background: #1A1810; border-color: #E4AC01; }
.aw-trk__col.is-flash { animation: awTrkFlash 700ms var(--ease); }
@keyframes awTrkFlash { 0%, 60% { border-color: #E4AC01; } 100% { border-color: #222222; } }
.aw-trk__colhead { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px 6px; }
.aw-trk__colhead > div { display: flex; align-items: center; gap: 8px; }
.aw-trk__colhead i { width: 8px; height: 8px; border-radius: 50%; }
.aw-trk__colhead span { font-size: 13px; font-weight: 700; color: var(--ink); }
.aw-trk__colhead b { min-width: 22px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 6px;
	background: #1F1F1F; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.aw-trk__colhint { padding-left: 16px; font-size: 12px; color: #8B8880; min-height: 18px; font-weight: 400 !important; }

.aw-trk__kcard { background: #1C1C1C; border: 1px solid #2A2A2A; border-radius: 12px; padding: 14px;
	display: flex; flex-direction: column; gap: 12px; cursor: grab;
	transition: border-color 140ms, transform 180ms var(--ease), box-shadow 180ms, opacity 160ms; }
.aw-trk__kcard:hover { border-color: #3A3A3A; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.45); }
.aw-trk__kcard.is-dragging { opacity: 0.4; }
.aw-trk__krow { display: flex; gap: 10px; align-items: flex-start; }
.aw-trk__klogo { flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #2A2A2A;
	display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--ink); overflow: hidden; }
.aw-trk__klogo img { width: 68%; height: 68%; object-fit: contain; }
.aw-trk__ktext { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aw-opps .aw-trk__ktext strong a { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.aw-opps .aw-trk__ktext strong a:hover { color: #F5BD16; }
.aw-trk__ktext > span { font-size: 12px; color: var(--ink-3); }
/* the board card's star is 28px, not the 32px the Opportunities page uses */
.aw-opps .aw-trk__krow .aw-star { width: 28px; height: 28px; }
.aw-opps .aw-trk__kx { flex: none; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: 6px;
	background: transparent; color: #8B8880; cursor: pointer; display: flex; align-items: center; justify-content: center;
	transition: border-color 120ms, color 120ms; }
.aw-opps .aw-trk__kx:hover { border-color: #3A3A3A; color: var(--ink); }
.aw-trk__kchips { display: flex; flex-wrap: wrap; gap: 5px; }
.aw-trk__kfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px;
	padding-top: 10px; border-top: 1px solid #262626; }
.aw-trk__note { flex: 1 1 140px; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.aw-trk__note.is-applied { color: #2BA3A3; }
.aw-trk__note.is-talking { color: #B3A6F5; }
.aw-trk__note.is-closed { color: #8B8880; }
.aw-opps .aw-trk__kact { flex: none; height: 32px; padding: 0 12px; border: 1px solid #3A3A3A; border-radius: 6px;
	background: transparent; color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center;
	transition: background 120ms, border-color 120ms, color 120ms; }
.aw-opps .aw-trk__kact:hover { border-color: #E4AC01; color: #F5BD16; }
.aw-opps a.aw-trk__kact--gold { border: 0; background: #E4AC01; color: #141414; }
.aw-opps a.aw-trk__kact--gold:hover { background: #F5BD16; color: #141414; }
.aw-trk__kempty { border: 1px dashed #333333; border-radius: 12px; padding: 18px 14px; font-size: 13px;
	line-height: 1.5; color: var(--ink-3); text-wrap: pretty; }

/* -------------------------------------------------- not for me, a row and not a column */
.aw-trk__passed { border-top: 1px solid #222222; padding-top: 12px; }
.aw-opps .aw-trk__passed summary { display: inline-flex; align-items: center; gap: 8px; height: 36px; list-style: none;
	color: var(--ink-3); font-size: 13px; cursor: pointer; }
.aw-opps .aw-trk__passed summary::-webkit-details-marker { display: none; }
.aw-opps .aw-trk__passed summary:hover { color: var(--ink); }
.aw-trk__passed summary i { width: 7px; height: 7px; border-radius: 50%; background: #8B8880; }
.aw-trk__passed summary svg { transition: transform 220ms var(--ease); }
.aw-trk__passed details[open] summary svg { transform: rotate(180deg); }
.aw-trk__passedlist { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.aw-trk__passedrow { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px 0 12px;
	border: 1px solid #2A2A2A; border-radius: 8px; background: #161616; font-size: 12px; color: var(--ink-2); }
.aw-opps .aw-trk__passedrow button { height: 26px; padding: 0 10px; border: 1px solid #3A3A3A; border-radius: 5px;
	background: transparent; color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
	text-transform: uppercase; cursor: pointer; transition: border-color 120ms, color 120ms; }
.aw-opps .aw-trk__passedrow button:hover { border-color: #E4AC01; color: #F5BD16; }

@media (max-width: 760px) {
	.aw-opps.aw-trk h1 { font-size: 34px; }
	.aw-opps.aw-trk h2 { font-size: 22px; }
	.aw-trk__avatar { width: 64px; height: 64px; }
	.aw-trk__card { padding: 18px; }
	.aw-trk__acts { gap: 8px; }
	.aw-opps a.aw-trk__full { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.aw-trk__card, .aw-trk__col, .aw-trk__kcard, .aw-trk__bar > span,
	.aw-opps .aw-trk__nextlist button, .aw-trk__passed summary svg { transition: none !important; animation: none !important; }
}