/* Griffin design system (purple mode), from the Focused Stream feed handoff.
	   Inter, purple accent, soft tinted fills, rounded cards, bottom sheets.
	   The variable NAMES are unchanged from the previous Primer palette, so
	   every view recolours from this block alone; only the feed adopts the new
	   layout. */
	:root {
		--brand: #7424BF;           /* brand purple: tiles, active pills, NEW badge */
		--brand-soft: #efe4fb;
		/* Two weights of the brand purple separate a keyword you typed (solid brand,
		   below) from one you picked off a field (this softer fill) — the picker
		   leans on that difference alone, so these two must stay distinguishable. */
		--pick-soft: #ebdef7;
		--pick-soft-fg: #5f1d9c;
		--accent: #6d4fd0;          /* interactive purple: links, buttons */
		--accent-hover: #5a3db8;
		--accent-subtle: #f2eefb;
		--accent-chip-border: #ddc8f5;
		--tracked-border: #f0d99a;  /* star-on border */
		--accent-tint: #faf8fc;

		--fg: #1b1533;
		--fg-muted: #6b6480;
		--fg-subtle: #8a80a0;
		--fg-placeholder: #9a90b0;
		--fg-secondary: #4a4266;
		--fg-faint: #b0a6c4;
		--snippet-meta: #6b6480;

		--canvas: #ffffff;
		--canvas-subtle: #faf9fc;

		--border: #e4ddef;
		--border-muted: #eee7f4;
		--border-danger: #f6d5d2;
		--card-border: #ececf0;

		--success-fg: #1a7f37;
		--success-subtle: #dafbe1;
		--danger-fg: #c0463f;       /* exclude / negative keyword */
		--danger-subtle: #fdeceb;

		--highlight: #ece0fb;       /* keyword match highlight */
		--mark-fg: #4a2a7a;
		--star-fill: #f4b942;
		--star-on-bg: #fdf4de;
		--star-off: #b8aecb;
		--tag-bg: #f4f2f7;
		--tag-fg: #7a7290;

		--scrim: rgba(27,21,51,.34);
		--toast-bg: #1b1533;
		--toast-action: #c9b6ec;
	}
	* { box-sizing: border-box; }
	/* Guard against any element forcing horizontal scroll on mobile (iOS Safari
	   renders it as dead space on the right). `clip` contains overflow without
	   creating a scroll container, so the sticky header keeps working. */
	html { overflow-x: clip; }
	body {
		margin: 0;
		max-width: 100%;
		overflow-x: clip;
		font: 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
		background: var(--canvas-subtle);
		color: var(--fg);
		-webkit-text-size-adjust: 100%;
		-webkit-font-smoothing: antialiased;
	}
	button { font: inherit; }
	@media (prefers-reduced-motion: no-preference) {
		.tr { transition: background .15s, border-color .15s, color .15s; }
	}

	/* Sheets and the toast animate in; both are suppressed under
	   prefers-reduced-motion (the handoff asks for it explicitly). */
	@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
	@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

	/* ---- Header (persistent) ------------------------------------------- */
	/* ONE white surface, three lines — context / search / lenses. It used to be
	   three visually disconnected bars (a floating chip, a search row with its
	   own avatar, a grey "Roles in…" strip); they read as separate widgets that
	   happened to be stacked. Dividers only where a line genuinely needs one:
	   the header's bottom edge. */
	header {
		position: sticky; top: 0; z-index: 30;
		background: var(--canvas);
		border-bottom: 1px solid var(--border-muted);
	}
	/* Line 1 — context: who you are, where you're looking, what you're looking at */
	.hdr-ctx {
		display: flex; align-items: center; gap: 9px;
		padding: 10px 16px 9px;
	}
	/* The hamburger stands where the brand tile used to, and it is now the only
	   way between views — the mode dropdown on the right is gone. */
	.hamburger {
		position: relative;   /* anchors the padded hit area below */
		flex: 0 0 auto;
		width: 38px; height: 38px; border-radius: 11px;
		display: flex; align-items: center; justify-content: center;
		border: 1px solid var(--accent-chip-border);
		background: var(--accent-subtle); color: var(--brand);
		cursor: pointer;
	}
	/* The tile reads better at 38px than at 44px, so the target is grown past
	   the paint rather than the other way round. */
	.hamburger::after {
		content: ""; position: absolute; top: 50%; left: 50%;
		width: 44px; height: 44px; transform: translate(-50%, -50%);
	}
	.hdr-where { display: flex; align-items: center; gap: 4px; min-width: 0; }
	.icon { flex: 0 0 auto; display: inline-flex; }

	/* ---- menu drawer ---------------------------------------------------- */
	/* Its own scrim, not the sheets' #scrim: closeSheets() commits the keyword
	   picker on the way out, and the drawer must never trip that. */
	.menu-scrim {
		position: fixed; inset: 0; z-index: 40;
		background: var(--scrim);
		animation: fadeIn .18s ease;
	}
	.drawer {
		position: fixed; z-index: 41; top: 0; left: 0; bottom: 0;
		width: 306px; max-width: 86vw;
		display: flex; flex-direction: column;
		background: var(--canvas);
		border-right: 1px solid var(--border);
		padding: calc(env(safe-area-inset-top, 0px) + 14px) 12px 16px;
		overflow-y: auto;
		animation: drawerIn .18s ease;
	}
	@keyframes drawerIn { from { transform: translateX(-100%); } to { transform: none; } }
	@media (prefers-reduced-motion: reduce) {
		.drawer, .menu-scrim { animation: none; }
	}
	.drawer-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; }
	.drawer-title { flex: 1 1 auto; font-weight: 800; font-size: 16px; color: var(--fg); }
	.drawer-close {
		flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px;
		display: flex; align-items: center; justify-content: center;
		border: 0; background: none; color: var(--fg-subtle); cursor: pointer;
	}
	.drawer-close:hover { background: var(--canvas-subtle); color: var(--fg); }
	.drawer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
	.dn-item {
		width: 100%;
		display: flex; align-items: center; gap: 12px;
		height: 48px; padding: 0 12px;
		border: 0; border-radius: 12px; background: none;
		font: inherit; font-size: 15px; font-weight: 500;
		color: var(--fg-secondary); text-align: left; cursor: pointer;
	}
	.dn-item:hover { background: var(--canvas-subtle); }
	.dn-item.on { background: var(--accent-subtle); color: var(--brand); font-weight: 600; }
	.dn-ico { flex: 0 0 auto; display: inline-flex; }
	.dn-label { flex: 1 1 auto; }
	.dn-count { flex: 0 0 auto; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
	.dn-item.on .dn-count { color: var(--brand); }
	.dn-beta {
		flex: 0 0 auto; padding: 2px 6px; border-radius: 6px;
		font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
		background: var(--tag-bg); color: var(--tag-fg);
	}
	.dn-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

	/* Line 2 — the search / keyword pill (full width) */
	.hdr-search { padding: 0 16px 10px; }
	.search-pill {
		display: flex; align-items: center; gap: 8px;
		padding: 5px 5px 5px 13px;
		border: 1px solid var(--border-muted); border-radius: 14px;
		background: var(--canvas-subtle);
	}
	.st-main {
		flex: 1 1 auto; min-width: 0;
		display: flex; align-items: center; gap: 9px;
		height: 34px; padding: 0; border: 0; background: none;
		cursor: pointer; text-align: left;
		color: var(--fg-placeholder); font-size: 15px; font-weight: 600;
	}
	.search-pill.has-kw .st-main { color: var(--fg); }
	.st-main .st-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.st-edit {
		flex: 0 0 auto;
		display: inline-flex; align-items: center; gap: 5px;
		height: 34px; padding: 0 12px; border-radius: 10px;
		border: 1px solid var(--border); background: var(--canvas);
		color: var(--brand); font-size: 14px; font-weight: 700; cursor: pointer;
	}

	.hdr-where .roles-in { color: var(--fg-muted); font-size: 14px; white-space: nowrap; }
	.country-picker { position: relative; display: inline-flex; min-width: 0; }
	.country-trigger {
		display: inline-flex; align-items: center; gap: 3px;
		border: 0; background: none; cursor: pointer;
		color: var(--fg); font-weight: 700; font-size: 14px;
		padding: 0 2px; max-width: 180px;
	}
	.country-trigger > span {
		white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	}
	.country-trigger svg { flex: 0 0 auto; }
	.country-popover {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
		min-width: 220px; max-height: 300px; overflow-y: auto;
		padding: 6px; border: 1px solid var(--border); border-radius: 10px;
		background: var(--canvas);
		box-shadow: 0 8px 24px rgba(0,0,0,.16);
	}
	.cp-head {
		padding: 4px 8px 6px; margin-bottom: 2px;
		font-size: 11px; font-weight: 600; letter-spacing: .02em;
		text-transform: uppercase; color: var(--fg-muted);
		border-bottom: 1px solid var(--border-muted);
	}
	.cp-row {
		display: flex; align-items: center; gap: 10px;
		padding: 7px 8px; border-radius: 7px; cursor: pointer;
		font-size: 14px; color: var(--fg);
	}
	.cp-row:hover { background: var(--canvas-subtle); }
	.cp-row input { flex: 0 0 auto; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
	.cp-row .cp-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.cp-row .cp-count { flex: 0 0 auto; color: var(--fg-muted); font-size: 12px; }
	.spacer { flex: 1 1 auto; }

	main { padding: 14px 16px 20px; }

	/* ---- Logo tile / initials fallback --------------------------------- */
	.logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
	.logo img { width: auto; height: auto; display: block; }
	.logo .initial {
		display: flex; align-items: center; justify-content: center;
		color: #fff; font-weight: 700; border-radius: 6px;
	}

	/* ---- Section header row (feed / lists) ----------------------------- */
	.sec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
	.sec-title { font-size: 16px; font-weight: 600; color: var(--fg); }

	/* ==== FEED — "Focused Stream" ======================================== */
	/* The feed is a triage surface: four lenses over one stream, per the
	   design handoff. Everything below is feed-only; the other views keep
	   their existing layout and pick up the new palette from :root. */

	/* ---- Lens control — line 3 of the header, feed-only ----------------- */
	/* Lives inside <header> so it rides the same sticky surface; it no longer
	   needs a sticky offset of its own (that offset had to be hand-tuned to the
	   header's height, and broke whenever the header changed). */
	.lenses {
		display: flex; gap: 6px; overflow-x: auto;
		padding: 0 16px 10px;
		scrollbar-width: none;
	}
	.lenses::-webkit-scrollbar { display: none; }
	.lens {
		flex: 0 0 auto;
		display: flex; align-items: center; gap: 6px;
		height: 34px; padding: 0 13px; border-radius: 17px;
		border: 1px solid var(--border); background: var(--canvas);
		color: var(--fg-muted); font-size: 13px; font-weight: 700; cursor: pointer;
	}
	.lens .lens-n {
		display: flex; align-items: center; justify-content: center;
		min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
		background: var(--accent-subtle); color: var(--brand);
		font-size: 11px; font-weight: 800;
	}
	.lens.on { background: var(--brand); border-color: var(--brand); color: #fff; }
	.lens.on .lens-n { background: rgba(255,255,255,.22); color: #fff; }
	.lens-line { font-size: 12.5px; color: var(--fg-subtle); line-height: 1.4; margin-bottom: 12px; }

	/* ---- Feed role card ------------------------------------------------ */
	.fcard {
		display: flex; align-items: flex-start; gap: 11px;
		background: var(--canvas); border: 1px solid var(--card-border);
		border-radius: 15px; padding: 12px 13px; margin-bottom: 9px;
		box-shadow: 0 2px 8px rgba(90,50,160,.06);
	}
	.fcard .fc-body { flex: 1 1 auto; min-width: 0; }
	.fc-meta { display: flex; align-items: center; gap: 6px; }
	.fc-co { font-size: 12.5px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fc-dot { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 2px; background: #d8d2e2; }
	.fc-loc { font-size: 11.5px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.fc-new {
		flex: 0 0 auto; margin-left: auto;
		display: flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px;
		background: var(--brand-soft); color: var(--brand);
		font-size: 10px; font-weight: 800; letter-spacing: .03em;
	}
	.fc-title {
		display: block; width: 100%; margin-top: 3px; padding: 0;
		border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit;
		font-size: 14.5px; font-weight: 700; color: var(--fg); line-height: 1.3;
		overflow-wrap: break-word;
	}
	.fc-snip { font-size: 12px; color: var(--fg-muted); line-height: 1.4; margin-top: 6px; overflow-wrap: break-word; }
	.fc-snip mark {
		background: var(--highlight); color: var(--mark-fg); font-weight: 700;
		border-radius: 3px; padding: 0 2px;
	}
	.fc-actions { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
	.fc-ago { font-size: 11.5px; color: var(--fg-placeholder); }
	.fc-btn {
		flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
		border: 0; background: var(--tag-bg);
		display: flex; align-items: center; justify-content: center; cursor: pointer;
	}
	.fc-track { color: var(--star-off); }
	.fc-track.on { background: var(--star-on-bg); color: var(--star-fill); }
	.fc-track.on svg { fill: var(--star-fill); }
	.fc-dismiss { color: #a99ec2; }

	/* ---- Feed states (first run, per-lens empty) ----------------------- */
	.onboard {
		background: var(--canvas); border: 1px solid var(--accent-chip-border);
		border-radius: 15px; padding: 16px; margin-bottom: 14px;
		box-shadow: 0 2px 8px rgba(90,50,160,.06);
	}
	.onboard .ob-title { font-size: 15px; font-weight: 800; color: var(--fg); }
	.onboard .ob-sub { font-size: 13px; color: var(--fg-muted); line-height: 1.45; margin-top: 5px; }
	.onboard .ob-row { display: flex; gap: 9px; margin-top: 13px; }
	.ob-primary {
		height: 40px; padding: 0 16px; border: 0; border-radius: 11px;
		background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
	}
	.ob-secondary {
		height: 40px; padding: 0 16px; border-radius: 11px;
		border: 1.5px solid var(--accent-chip-border); background: var(--accent-tint);
		color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer;
	}

	/* ---- First-run home: coverage + logo wall -------------------------- */
	/* The setup card puts its CTA beside the copy, not under it, so the three
	   blocks below (stats, wall, browse) stay above the fold on a phone. */
	.home-setup { display: flex; align-items: center; gap: 12px; }
	.home-setup .ob-primary { flex: 0 0 auto; margin-left: auto; }
	.home-setup .ob-sub { margin-top: 3px; }

	/* One card, three cells, divided by hairlines (border-left on all but the
	   first) — a segmented stat strip rather than three separate cards. */
	.home-stats {
		display: grid; grid-template-columns: repeat(3, 1fr);
		background: var(--canvas); border: 1px solid var(--card-border);
		border-radius: 15px; padding: 15px 0; margin-bottom: 9px;
	}
	.hs-cell { padding: 0 14px; min-width: 0; }
	.hs-cell + .hs-cell { border-left: 1px solid var(--border-muted); }
	.hs-num { font-size: 21px; font-weight: 800; color: var(--fg); letter-spacing: -.4px; }
	.hs-num.accent { color: var(--accent); }
	.hs-label { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }

	.home-fresh {
		display: flex; align-items: center; gap: 7px;
		font-size: 12.5px; color: var(--fg-muted); margin: 0 2px 16px;
	}
	.hf-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 3px; background: var(--success-fg); }

	.home-head { display: flex; align-items: baseline; gap: 8px; margin: 0 2px 10px; }
	.hh-title { font-size: 15px; font-weight: 800; color: var(--fg); }
	.hh-cap { margin-left: auto; font-size: 13px; color: var(--fg-subtle); }

	/* auto-fill, not repeat(5, 1fr): the app has no max-width, so a fixed five
	   columns stretch each square tile to ~240px on a desktop monitor with a
	   44px logo marooned in the middle. Sizing by the TILE instead pins them at
	   ~62px everywhere — which still lands on exactly five columns at 390px. */
	.home-wall {
		display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
		gap: 8px; margin-bottom: 14px;
	}
	.wall-tile {
		display: flex; align-items: center; justify-content: center;
		aspect-ratio: 1; padding: 0; cursor: pointer;
		background: var(--canvas); border: 1px solid var(--card-border); border-radius: 13px;
	}
	/* makeAvatar draws its own rounded tile; keep it clear of the border. */
	.wall-tile .logo { display: flex; align-items: center; justify-content: center; }
	.wall-more {
		background: var(--accent-subtle); border-color: var(--accent-chip-border);
		color: var(--accent); font-size: 14px; font-weight: 800;
	}

	.home-browse {
		display: flex; align-items: center; justify-content: center; gap: 6px;
		width: 100%; height: 46px; cursor: pointer;
		background: var(--accent-tint); border: 1.5px solid var(--accent-chip-border);
		border-radius: 13px; color: var(--accent); font-size: 14.5px; font-weight: 700;
	}
	/* chevronRight carries a hardcoded grey fill; a CSS rule outranks that
	   presentation attribute, so the chevron picks up the button's purple. */
	.home-browse svg { flex: 0 0 auto; fill: currentColor; }
	.fempty { text-align: center; padding: 40px 20px; }
	.fempty .fe-title { font-size: 14px; font-weight: 700; color: var(--fg-muted); }
	.fempty .fe-sub { font-size: 12.5px; color: var(--fg-placeholder); margin-top: 6px; line-height: 1.45; }
	.fempty .fe-act {
		margin-top: 13px; height: 38px; padding: 0 15px; border: 0; border-radius: 10px;
		background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; cursor: pointer;
	}

	/* ---- Bottom sheets (keywords, role detail) ------------------------- */
	.scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); }
	.sheet {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		max-width: 560px; margin: 0 auto; max-height: 88vh; overflow-y: auto;
		background: var(--canvas); border-radius: 24px 24px 0 0;
		padding: 20px 18px 26px;
		box-shadow: 0 -12px 40px rgba(27,21,51,.25);
	}
	@media (prefers-reduced-motion: no-preference) {
		.scrim { animation: fadeIn .15s; }
		.sheet { animation: sheetUp .22s cubic-bezier(.2,.8,.2,1); }
	}
	.grab { width: 38px; height: 4px; border-radius: 2px; background: var(--border); margin: 0 auto 16px; }
	.sheet-title { font-size: 16px; font-weight: 800; color: var(--fg); }

	/* Role picker sheet ("What are you looking for?") */
	/* Extra bottom padding leaves room for the sticky footer button. */
	.sheet.picker { padding-bottom: 0; }
	.kw-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
	.kw-clear {
		margin-left: auto; border: 0; background: none; padding: 0; cursor: pointer;
		color: var(--accent); font-size: 13px; font-weight: 700; font-family: inherit;
	}
	.kw-lede { margin: 0 0 4px; font-size: 13px; line-height: 1.45; color: var(--fg-muted); }
	.kw-grid { display: flex; flex-wrap: wrap; gap: 8px; }
	/* A role chip is the whole picker: tap to select, count shown while it isn't. */
	.rchip {
		display: inline-flex; align-items: center; gap: 7px;
		min-height: 36px; padding: 0 13px; border-radius: 18px;
		border: 1px solid var(--border); background: var(--canvas);
		color: var(--fg-secondary); font-size: 14px; font-weight: 600;
		cursor: pointer; font-family: inherit; text-align: left;
	}
	.rchip .rc-n { font-size: 12px; font-weight: 700; color: var(--fg-faint); }
	.rchip .rc-n.zero { color: var(--fg-faint); opacity: .6; }
	.rchip .rc-tick { display: none; }
	/* Picked. The soft fill is the same one its chip wears up in the tray, which is
	   how the two views read as one selection rather than two. */
	.rchip.on {
		background: var(--pick-soft); border-color: var(--pick-soft); color: var(--pick-soft-fg);
	}
	.rchip.on .rc-tick { display: inline-flex; }
	.rchip.on .rc-n { display: none; }
	.rchip.x.on { background: var(--danger-fg); border-color: var(--danger-fg); color: #fff; }
	.rchip:disabled { opacity: .45; cursor: default; }

	/* Field accordion — the spine of the picker. One row per field, ranked by how
	   many open roles the field matches, so the biggest opportunity reads first.
	   Collapsed rows keep all eight fields on one screen; the role types live
	   inside, one field at a time. */
	.fld {
		border: 1.5px solid var(--border); border-radius: 15px;
		background: var(--canvas); margin-bottom: 8px;
	}
	.fld-row {
		display: flex; align-items: center; gap: 11px; width: 100%;
		padding: 10px 12px; border: 0; border-radius: 14px; background: none;
		cursor: pointer; font-family: inherit; text-align: left;
	}
	.fld-ic {
		flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
		width: 34px; height: 34px; border-radius: 10px;
		background: var(--brand-soft); color: var(--brand);
	}
	.fld-txt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
	.fld-name { font-size: 14.5px; font-weight: 700; color: var(--fg); white-space: nowrap; }
	.fld-row .rc-n {
		font-size: 12.5px; font-weight: 600; color: var(--fg-subtle);
		font-variant-numeric: tabular-nums; white-space: nowrap;
	}
	.fld-row .rc-n.zero { opacity: .6; }
	.fld-sel {
		flex: 0 0 auto; padding: 3px 8px; border-radius: 8px;
		background: var(--brand-soft); color: var(--brand);
		font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
	}
	.fld-chev { flex: 0 0 auto; display: inline-flex; color: var(--fg-faint); }
	.fld.open .fld-chev { transform: rotate(180deg); }
	.fld-body { padding: 2px 12px 12px; }
	/* Bulk toggle for the whole field — the shortcut past eight taps. */
	.fld-all {
		display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
		margin-bottom: 9px; border-radius: 15px;
		border: 1px dashed var(--accent-chip-border); background: var(--accent-subtle);
		color: var(--accent); font-size: 12.5px; font-weight: 700;
		cursor: pointer; font-family: inherit;
	}
	.fld-all.on { border-style: solid; }

	/* Keyword tray — the one answer to "what am I searching for?". Typed words and
	   role types picked out of the accordion both land here, so nothing the user
	   chose is hidden behind a collapsed row. It's a tag input: the chips and the
	   caret share a line and wrap together. */
	.kw-tray {
		display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
		min-height: 46px; padding: 7px 7px 7px 10px; border-radius: 12px;
		border: 1.5px solid var(--border); background: var(--accent-tint);
	}
	.kw-tray.filled { border-color: var(--accent); }
	/* No box of its own: the chips wrap as if they were the tray's own children,
	   which lets the input — static markup, so a re-render never steals the caret —
	   sit at the end of the last chip line. */
	#kwChips { display: contents; }
	.kw-tray input {
		flex: 1 1 130px; min-width: 130px; height: 32px;
		border: 0; outline: none; background: none;
		/* 16px min avoids iOS Safari auto-zoom on focus */
		font-size: 16px; color: var(--fg); font-family: inherit;
	}
	.kw-tray input::placeholder { color: var(--fg-placeholder); }
	/* Enter is the real commit; the button only shows up once there's something to
	   commit, so an empty tray reads as a clean input rather than a dare. */
	.kw-add {
		display: none;
		flex: 0 0 auto; height: 32px; padding: 0 15px; border: 0; border-radius: 9px;
		background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
		cursor: pointer; font-family: inherit;
	}
	.kw-tray.filled .kw-add { display: inline-flex; align-items: center; }
	/* A tray chip is a removal, not a toggle: the whole surface removes it and the
	   × says as much. Solid brand = you typed it; soft fill = you picked it. */
	.kwc {
		display: inline-flex; align-items: center; gap: 6px;
		height: 32px; padding: 0 9px 0 12px; border-radius: 16px;
		border: 0; cursor: pointer; font-family: inherit;
		font-size: 13.5px; font-weight: 700;
		background: var(--pick-soft); color: var(--pick-soft-fg);
	}
	.kwc.own { background: var(--brand); color: #fff; }
	.kwc-x { display: inline-flex; opacity: .6; }
	.kwc:hover .kwc-x { opacity: 1; }
	.kw-hint { font-size: 12px; color: var(--fg-placeholder); margin-top: 10px; line-height: 1.45; }
	.kw-hint b { color: var(--fg-muted); font-weight: 700; }

	/* Sticky commit bar — previews the live total for the current picks. */
	.kw-foot {
		position: sticky; bottom: 0;
		margin: 18px -18px 0; padding: 12px 18px;
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		background: var(--canvas); border-top: 1px solid var(--border-muted);
	}
	.kw-apply {
		display: block; width: 100%; height: 48px; border: 0; border-radius: 13px;
		background: var(--brand); color: #fff;
		font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit;
	}
	.kw-apply:disabled { background: var(--tag-bg); color: var(--fg-placeholder); cursor: default; }

	/* Role detail sheet */
	.rs-head { display: flex; align-items: center; gap: 12px; }
	.rs-head .rs-info { flex: 1 1 auto; min-width: 0; }
	.rs-co { font-size: 13px; font-weight: 700; color: var(--accent); }
	.rs-posted { font-size: 12px; color: var(--fg-subtle); margin-top: 1px; }
	.rs-title { font-size: 19px; font-weight: 800; color: var(--fg); line-height: 1.3; margin-top: 14px; overflow-wrap: break-word; }
	.rs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 10px; }
	.rs-loc { font-size: 13px; color: var(--fg-subtle); }
	.rs-salary { font-size: 13px; color: var(--fg-faint); }
	.rs-desc {
		font-size: 13.5px; color: var(--fg-secondary); line-height: 1.55; margin-top: 12px;
		white-space: pre-line; overflow-wrap: break-word; max-height: 38vh; overflow-y: auto;
	}
	.rs-desc.none { color: var(--fg-faint); font-style: italic; }
	.rs-actions { display: flex; gap: 10px; margin-top: 18px; }
	.rs-track {
		flex: 0 0 auto;
		display: inline-flex; align-items: center; gap: 7px;
		height: 46px; padding: 0 16px; border-radius: 13px;
		border: 1.5px solid var(--accent-chip-border); background: var(--accent-tint);
		color: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
	}
	.rs-track.on {
		border-color: var(--tracked-border); background: var(--star-on-bg); color: #b07d10;
	}
	.rs-track.on svg { fill: var(--star-fill); color: var(--star-fill); }
	.rs-open {
		flex: 1 1 auto;
		display: inline-flex; align-items: center; justify-content: center; gap: 8px;
		height: 46px; border-radius: 13px; background: var(--accent);
		color: #fff; font-size: 14.5px; font-weight: 700; text-decoration: none;
	}
	.rs-open:hover { color: #fff; background: var(--accent-hover); }

	/* ---- Undo toast ---------------------------------------------------- */
	.toast {
		position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 70;
		max-width: 528px; margin: 0 auto;
		display: flex; align-items: center; gap: 10px;
		background: var(--toast-bg); border-radius: 14px; padding: 12px 14px;
		box-shadow: 0 12px 30px rgba(27,21,51,.35);
	}
	@media (prefers-reduced-motion: no-preference) { .toast { animation: fadeIn .15s; } }
	.toast .t-msg { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: #fff; }
	.toast .t-undo {
		flex: 0 0 auto; border: 0; background: none; cursor: pointer; padding: 0;
		color: var(--toast-action); font-size: 13px; font-weight: 800; font-family: inherit;
	}

	/* ---- Job card ------------------------------------------------------ */
	.job {
		display: flex; gap: 12px;
		background: var(--canvas); border: 1px solid var(--border);
		border-radius: 6px; padding: 13px; margin-bottom: 8px;
	}
	.job .job-body { flex: 1 1 auto; min-width: 0; }
	.job .title-row { display: flex; align-items: flex-start; gap: 8px; }
	.job a.title {
		flex: 1 1 auto; min-width: 0;
		color: var(--accent); text-decoration: none;
		font-size: 15px; font-weight: 600; line-height: 1.35;
		overflow-wrap: break-word;
	}
	.job a.title:hover { text-decoration: underline; }

	.track {
		flex: 0 0 auto;
		width: 28px; height: 28px; border-radius: 6px;
		border: 1px solid var(--border); background: var(--canvas-subtle);
		display: flex; align-items: center; justify-content: center;
		cursor: pointer; color: var(--fg-muted);
	}
	.track.on {
		background: var(--star-on-bg); border-color: var(--tracked-border); color: var(--star-fill);
	}
	.track.on svg { fill: var(--star-fill); stroke: var(--star-fill); }

	.snippet {
		font-size: 12.5px; line-height: 1.45; color: var(--fg-muted);
		margin-top: 6px; overflow-wrap: break-word;
	}
	.snippet mark {
		background: var(--highlight); color: var(--mark-fg); font-weight: 700;
		border-radius: 3px; padding: 0 2px;
	}
	.meta {
		display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
		color: var(--fg-muted); font-size: 12px; margin-top: 6px;
	}
	.meta .dot { color: var(--border); }
	.dept-label {
		display: inline-block; background: var(--canvas-subtle); border: 1px solid var(--border);
		color: var(--fg-muted); border-radius: 20px; padding: 1px 8px; font-size: 12px; font-weight: 500;
	}
	.salary {
		display: inline-block; margin-top: 8px;
		background: var(--success-subtle); color: var(--success-fg);
		border-radius: 20px; padding: 2px 9px; font-size: 12px; font-weight: 600;
	}
	.salary.none { background: none; color: var(--fg-subtle); font-weight: 400; padding: 0; margin-top: 6px; }
	.desc-toggle {
		display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
		background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
		color: var(--accent); font-size: 12.5px; font-weight: 500;
	}
	.desc-toggle:hover { text-decoration: underline; }
	.desc-toggle::before { content: "\25B8"; font-size: 10px; line-height: 1; }
	.desc-toggle.open::before { content: "\25BE"; }
	.job-desc {
		white-space: pre-line; margin-top: 8px; font-size: 13px; line-height: 1.5;
		color: var(--fg-secondary); overflow-wrap: break-word;
		border-left: 2px solid var(--border-muted); padding-left: 10px;
		max-height: 340px; overflow-y: auto;
	}

	/* ---- Bordered state cards (empty / no-match) ----------------------- */
	.state-card {
		background: var(--canvas); border: 1px solid var(--border); border-radius: 6px;
		padding: 26px 18px; text-align: center; color: var(--fg-muted); font-size: 13px;
	}
	.state-card .st-title { color: var(--fg); font-weight: 600; font-size: 14px; margin: 8px 0 4px; }
	.state-card .star-glyph {
		width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border);
		display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted);
	}
	.muted-status { color: var(--fg-muted); font-size: 13px; margin: 4px 0 12px; min-height: 18px; }

	/* ---- Companies list ------------------------------------------------ */
	.co-row {
		display: flex; align-items: center; gap: 12px;
		background: var(--canvas); border: 1px solid var(--border); border-radius: 6px;
		padding: 12px 13px; margin-bottom: 8px; cursor: pointer; text-align: left; width: 100%;
		text-decoration: none;
	}
	.co-row .info { flex: 1 1 auto; min-width: 0; }
	.co-row .name { color: var(--accent); font-weight: 600; font-size: 15px; overflow-wrap: break-word; }
	.co-row .count { color: var(--fg-muted); font-size: 13px; }
	.co-row.coming-soon { opacity: .55; }
	.co-row.coming-soon .name { color: var(--fg); }
	.co-row .chev { flex: 0 0 auto; color: var(--fg-muted); }
	.sec-label {
		font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
		color: var(--fg-muted); margin: 20px 0 10px;
		scroll-margin-top: 150px;
	}
	.sec-label:first-child { margin-top: 4px; }

	/* ---- Company filter box ------------------------------------------- */
	.co-filter {
		position: sticky; top: 84px; z-index: 21;
		display: flex; align-items: center; gap: 8px;
		height: 40px; padding: 0 12px; margin: 0 0 6px;
		border: 1px solid var(--border); border-radius: 20px;
		background: var(--canvas);
	}
	.co-filter:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(109,79,208,.22); }
	.co-filter-icon { flex: 0 0 auto; color: var(--fg-muted); }
	.co-filter input {
		flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: none;
		/* 16px min avoids iOS Safari auto-zoom on focus */
		font-size: 16px; color: var(--fg);
	}
	.co-filter input::placeholder { color: var(--fg-placeholder); }
	.co-filter-clear { flex: 0 0 auto; border: 0; background: none; cursor: pointer;
		color: var(--fg-muted); padding: 0; display: none; align-items: center; }
	.co-filter-clear.show { display: inline-flex; }

	/* ---- Sector accordion (companies default view) -------------------- */
	.sector-head {
		display: flex; align-items: center; gap: 10px; width: 100%;
		background: var(--canvas); border: 1px solid var(--border); border-radius: 8px;
		padding: 12px 13px; margin-bottom: 8px; cursor: pointer; text-align: left;
	}
	.sector-head.open { background: var(--canvas-subtle); border-color: var(--accent-chip-border); margin-bottom: 0; }
	.sector-meta { flex: 1 1 auto; min-width: 0; }
	.sector-name { font-size: 15px; font-weight: 600; color: var(--fg); }
	.sector-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
	.sector-logos { flex: 0 0 auto; display: flex; align-items: center; }
	.sector-logos .logo { margin-left: -8px; }
	.sector-logos .logo:first-child { margin-left: 0; }
	.sector-logos .logo img, .sector-logos .logo .initial {
		border: 2px solid var(--canvas); border-radius: 6px; box-sizing: content-box; background: var(--canvas);
	}
	.sector-head.open .sector-logos { display: none; }
	.sector-more-count { flex: 0 0 auto; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
	.sector-chev { flex: 0 0 auto; display: flex; color: var(--fg-muted); transition: transform .15s ease; }
	.sector-head.open .sector-chev { transform: rotate(90deg); }
	.sector-body {
		margin: 0 0 8px 8px; padding: 10px 0 2px 12px;
		border-left: 2px solid var(--border-muted);
	}
	.sector-body .co-row:last-child { margin-bottom: 0; }

	/* ---- Company detail ------------------------------------------------ */
	.back { background: none; border: 0; color: var(--accent); font-size: 14px; font-weight: 500;
		cursor: pointer; padding: 0; margin-bottom: 14px; }
	.detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
	.detail-head .info { flex: 1 1 auto; min-width: 0; }
	.detail-head h2 { margin: 0; font-size: 20px; font-weight: 600; overflow-wrap: break-word; }
	.detail-head .count { color: var(--fg-muted); font-size: 14px; }
	.dept-select {
		width: 100%; margin-bottom: 14px;
		padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
		background: var(--canvas); color: var(--fg); font-size: 14px; appearance: none; -webkit-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23656d76'%3E%3Cpath d='M4.427 6.427 8 10l3.573-3.573A.25.25 0 0 0 11.396 6H4.604a.25.25 0 0 0-.177.427Z'/%3E%3C/svg%3E");
		background-repeat: no-repeat; background-position: right 12px center;
	}

	/* ---- Misc ---------------------------------------------------------- */
	.suggest-link { text-align: center; padding: 8px 16px 24px; }
	.suggest-link button { background: none; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; }
	.load-more { text-align: center; padding: 8px 0 4px; }
	.load-more button { background: none; border: 0; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; }
	footer { text-align: center; padding: 16px; font-size: 12px; color: var(--fg-subtle); }
	footer a { color: var(--fg-muted); }

	/* Request board (kept from the previous app) */
	.submit-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
	.submit-row input {
		flex: 1 1 180px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px;
		font-size: 16px; background: var(--canvas);
	}
	.submit-row button {
		flex: 0 0 auto; padding: 9px 16px; border: 0; border-radius: 8px;
		background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
	}
	.submit-row button:disabled { opacity: .55; cursor: default; }
	#submitMsg { font-size: 13px; min-height: 18px; margin: 0 0 12px; }
	#submitMsg.ok { color: var(--success-fg); }
	#submitMsg.err { color: var(--danger-fg); }

	/* ---- Ratings view -------------------------------------------------- */
	.rt-lede { color: var(--fg-muted); font-size: 13.5px; margin: 2px 0 12px; max-width: 62ch; }
	.rt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
	.rt-chip {
		font-size: 12.5px; color: var(--fg-muted); background: var(--canvas);
		border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px;
	}
	.rt-chip b { color: var(--fg); font-variant-numeric: tabular-nums; }
	.rt-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--canvas); }
	.rt-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
	.rt-table thead th {
		text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
		color: var(--fg-muted); font-weight: 600; padding: 11px 13px;
		border-bottom: 1px solid var(--border); white-space: nowrap;
	}
	.rt-table thead th.c { text-align: center; }
	.rt-table tbody td { padding: 9px 13px; border-bottom: 1px solid var(--border-muted); vertical-align: middle; }
	.rt-table tbody tr:last-child td { border-bottom: none; }
	.rt-table tbody tr:hover td { background: var(--accent-tint); }
	.rt-table td.co { font-weight: 600; min-width: 160px; }
	.rt-table td.co .tk {
		color: var(--fg-muted); font-size: 11.5px; margin-left: 6px; font-weight: 400;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	}
	.rt-table td.g {
		text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	}
	.rt-table td.g .dash { color: var(--border); }
	.rt-table td.ol { color: var(--fg-muted); font-size: 12.5px; white-space: nowrap; }
	.rt-table tbody tr.rt-sec { cursor: pointer; }
	.rt-table tbody tr.rt-sec td {
		background: var(--canvas-subtle); color: var(--fg-muted);
		font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
		padding: 8px 13px; border-bottom: 1px solid var(--border); user-select: none;
	}
	.rt-table tbody tr.rt-sec:hover td { color: var(--fg); }
	.rt-table tbody tr.rt-sec:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
	.rt-caret {
		display: inline-block; width: 0; height: 0; margin-right: 9px; vertical-align: middle;
		border-left: 4px solid transparent; border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
	}
	.rt-table tbody tr.rt-sec.collapsed .rt-caret { transform: rotate(-90deg); }
	.rt-sec-n { margin-left: 8px; color: var(--fg-subtle); font-weight: 600; letter-spacing: 0; }
	@media (prefers-reduced-motion: no-preference) { .rt-caret { transition: transform .15s; } }
	.rt-pill {
		display: inline-flex; align-items: center; justify-content: center; min-width: 42px;
		padding: 3px 10px; border-radius: 20px; border: 1px solid transparent;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 13px;
	}
	.rt-pill.strong, .rt-sw.strong, .rt-gpill.strong { background: var(--success-subtle); color: var(--success-fg); border-color: #aceebb; }
	.rt-pill.adeq,   .rt-sw.adeq,   .rt-gpill.adeq   { background: var(--accent-subtle);  color: #0550ae;          border-color: var(--accent-chip-border); }
	.rt-pill.watch,  .rt-sw.watch,  .rt-gpill.watch  { background: #fff1e5;               color: #9a6700;          border-color: #f5d9a8; }
	.rt-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 2px 0; font-size: 12px; color: var(--fg-muted); }
	.rt-legend span { display: inline-flex; align-items: center; gap: 6px; }
	.rt-sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid transparent; }
	.rt-note { color: var(--fg-muted); font-size: 12px; line-height: 1.6; margin: 16px 0 0; max-width: 74ch; }
	.rt-note b { color: var(--fg); font-weight: 600; }
	.rt-scale { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 2px 0; font-size: 12px; color: var(--fg-muted); }
	.rt-scale b { color: var(--fg); font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
	.rt-table tbody tr.rt-co { cursor: pointer; }
	.rt-pill.rt-toggle { cursor: pointer; gap: 5px; }
	.rt-table tbody tr.rt-co:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
	.rt-pcaret {
		display: inline-block; width: 0; height: 0;
		border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
		border-top: 4px solid currentColor; opacity: .65;
	}
	.rt-table tbody tr.rt-co.open .rt-pcaret { transform: rotate(180deg); }
	@media (prefers-reduced-motion: no-preference) { .rt-pcaret { transition: transform .15s; } }
	.rt-table tbody tr.rt-detail td { padding: 0 13px 10px; border-bottom: 1px solid var(--border-muted); background: var(--canvas); }
	.rt-detail-inner {
		display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 9px 13px;
		background: var(--canvas-subtle); border-radius: 8px; font-size: 12.5px; color: var(--fg-muted);
	}
	.rt-detail-inner .agc { display: inline-flex; gap: 7px; align-items: center; }
	.rt-detail-inner .lbl { color: var(--fg-subtle); }
	.rt-detail-inner .dash { color: var(--border); }
	.rt-gpill {
		display: inline-flex; align-items: center; justify-content: center; min-width: 34px;
		padding: 2px 8px; border-radius: 20px; border: 1px solid transparent;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; font-size: 12px;
	}
	.rt-src { margin-top: 8px; }
	.rt-quote {
		margin: 0; padding: 9px 13px; background: var(--canvas-subtle); border-radius: 8px;
		font-size: 12px; line-height: 1.55; color: var(--fg-muted);
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto;
	}
	.rt-cite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 7px; padding: 0 2px; }
	.rt-filed { font-size: 11.5px; color: var(--fg-subtle); }
	.rt-edgar { font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; }
	.rt-edgar:hover { text-decoration: underline; }

	[hidden] { display: none !important; }