/* Goald web app — hand-rolled design tokens matching the Goald mobile
   app's design language: light surfaces, magenta/pink brand colour,
   dark-violet chrome, neon-green highlights, Bai Jamjuree throughout.
   Light-first (the mobile app is light-themed); a dark override
   remains as a secondary media query. No CSS framework dependency —
   keeps the wasm bundle and build graph small. Palette reference:
   docs/superpowers/plans/2026-07-10-web-app-reskin.md. */

/* Bai Jamjuree, self-hosted (SIL OFL 1.1 — /OFL.txt). The font files
   sit at the dist root: see index.html for why they must not live
   under a subdirectory. Weights 400/500/600/700 — the family tops out
   at 700; the mobile app's heavier strokes are synthesised. */

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/bai-jamjuree-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/bai-jamjuree-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-500.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/bai-jamjuree-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-600.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/bai-jamjuree-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bai Jamjuree";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/bai-jamjuree-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
		U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The palette — every value is a mobile `AppColors` constant (the
   mobile token is named in the trailing comment). */

:root {
	--color-bg:             #ffffff; /* scaffold white */
	--color-bg-raised:      #fcfcfc; /* whiteSubtle */
	--color-bg-sunken:      #f3f3f3; /* abeilGrey / secondaryButtonColor */
	--color-bg-header:      #f8f8f8; /* profileHeaderColor */
	--color-border:         #e7e7e7; /* dividerGrey */
	--color-divider:        #d9d9d9; /* divider */
	--color-text:           #171717; /* black17 */
	--color-text-muted:     #808080; /* informationTextColor */
	--color-brand:          #cb04a5; /* primaryBrand */
	--color-cta:            #d21eb1; /* pinkButtonColor */
	--color-violet:         #380f43; /* darkViolet */
	--color-violet-soft:    #341744; /* secondaryDetailColor */
	--color-nav-idle:       #6a3d87; /* bottomUnselectItemColor */
	--color-btn2-text:      #5d0c8a; /* secondaryButtonTextColor */
	--color-green:          #00f587; /* guppieGreen */
	--color-blue:           #34acee; /* pictonBlue */
	--color-yellow:         #d5b404; /* mustardYellow */
	--color-bronze:         #c1680f; /* bronze */
	--color-danger:         #ed4c5c; /* errorRed */
	--color-danger-text:    #ffffff;
	--color-shadow:         rgb(112 112 112 / 20%); /* dropShadowColor @ 20% */
	--gradient-auth:        linear-gradient(160deg, #4f0b75, #cc08bc); /* loadingGradientPurple → loadingGradientPink */
	--gradient-brand-blue:  linear-gradient(160deg, #ad0ca0, #67a9eb); /* bluePinkGradient */

	/* Aliases kept for the shared class vocabulary. */
	--color-accent:         var(--color-brand);
	--color-accent-text:    #ffffff;
	--color-success:        var(--color-green);
	--color-warning:        var(--color-yellow);

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;

	/* The mobile shape grammar: 5px chips, 10px buttons / inputs /
	   cards, 16px sheets. */
	--radius-sm: 5px;
	--radius-md: 10px;
	--radius-lg: 16px;

	--shadow-card: 0 2px 3px var(--color-shadow);

	--font-sans:
		"Bai Jamjuree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* The dark override is secondary — the mobile app (and therefore the
   default web look) is light. Violet-tinted darks keep the brand feel;
   the brand / accent colours read fine on both. */
@media (prefers-color-scheme: dark) {
	:root {
		--color-bg:         #170b1d;
		--color-bg-raised:  #21112b;
		--color-bg-sunken:  #100716;
		--color-bg-header:  #1d0e25;
		--color-border:     #3a2547;
		--color-divider:    #3a2547;
		--color-text:       #f3f3f3;
		--color-text-muted: #b6a9bf;
		--color-shadow:     rgb(0 0 0 / 40%);
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.5;
}

a {
	color: var(--color-brand);
	font-weight: 600;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* App shell: sticky top nav + centred content column. */

.app-shell {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.app-topnav {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-wrap: wrap;
	padding: var(--space-2) var(--space-4);
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.app-topnav__brand {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-brand);
	margin-right: var(--space-4);
	text-decoration: none;
}

.app-topnav a {
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-md);
	color: var(--color-nav-idle);
	font-weight: 600;
	text-decoration: none;
}

/* The brand wordmark is exempt from the link pill treatment — it is
   also an `<A href="/">`, so it would otherwise carry the active pill
   whenever the feed is open. */

.app-topnav a:hover:not(.app-topnav__brand),
.app-topnav a.active:not(.app-topnav__brand),
.app-topnav a[aria-current]:not(.app-topnav__brand) {
	background: var(--color-bg-sunken);
	color: var(--color-cta);
}

.app-topnav__links {
	display: contents;
}

.app-topnav__spacer {
	flex: 1;
}

/* The unread-count pill shared by the top nav's Notifications link
   and the bottom nav's bell. */

.app-nav__badge {
	display: inline-block;
	background: var(--color-cta);
	color: #ffffff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.2;
	padding: 0 0.35rem;
	min-width: 1rem;
	text-align: center;
	vertical-align: top;
}

/* The bottom navigation — the mobile app's five-tab bar. Hidden on
   wide viewports; fixed to the bottom edge on narrow ones. Active =
   pink, inactive = the mobile bar's muted violet. */

.app-bottomnav {
	display: none;
}

@media (max-width: 720px) {
	.app-topnav__links {
		display: none;
	}

	.app-bottomnav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		display: flex;
		justify-content: space-around;
		align-items: stretch;
		background: var(--color-bg);
		border-top: 1px solid var(--color-border);
		padding: var(--space-1) 0 calc(var(--space-1) + env(safe-area-inset-bottom));
	}

	/* Keep the content clear of the fixed bar. */
	.app-main {
		padding-bottom: calc(var(--space-8) + 64px);
	}
}

.app-bottomnav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: var(--space-1) var(--space-2);
	color: var(--color-nav-idle);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
}

.app-bottomnav a svg {
	width: 24px;
	height: 24px;
}

.app-bottomnav a[aria-current],
.app-bottomnav a.active {
	color: var(--color-cta);
}

.app-bottomnav__icon {
	position: relative;
	display: flex;
}

.app-bottomnav__icon .app-nav__badge {
	position: absolute;
	top: -4px;
	right: -10px;
}

.app-main {
	width: 100%;
	max-width: 860px;
	margin: 0 auto;
	padding: var(--space-6) var(--space-4) var(--space-8);
}

.page-title {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--color-violet-soft);
	margin: 0 0 var(--space-4);
}

.section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-violet-soft);
	margin: var(--space-6) 0 var(--space-3);
}

@media (prefers-color-scheme: dark) {
	.page-title,
	.section-title {
		color: var(--color-text);
	}
}

.card {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
}

.card + .card {
	margin-top: var(--space-4);
}

.card-title {
	font-weight: 700;
	margin: 0 0 var(--space-2);
}

/* The trending feed — single column of mobile-style feed cards: a
   dark-violet author bar over a brand-magenta body strip, mirroring
   the mobile app's feed-card anatomy. */

.feed-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.feed-card {
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	text-decoration: none;
}

.feed-card:hover {
	filter: brightness(1.05);
}

.feed-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background: var(--color-violet);
	padding: var(--space-2) var(--space-3);
}

.feed-card__author-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.feed-card__username {
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95rem;
}

.feed-card__subtitle {
	color: rgb(255 255 255 / 60%);
	font-weight: 600;
	font-size: 0.8rem;
}

.feed-card__body {
	background: var(--color-brand);
	color: #ffffff;
	padding: var(--space-3);
}

.feed-card__title {
	font-weight: 700;
	font-size: 1.05rem;
}

/* Author rows on light surfaces (submission cards, lists). */

.author-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.author-row__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.author-row__name {
	font-weight: 700;
	color: var(--color-violet-soft);
	text-decoration: none;
}

.author-row__subtitle {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
	.author-row__name {
		color: var(--color-text);
	}
}

/* The verified tick — the mobile pattern: a green check on a
   dark-violet disc, inline after the name. */

.verified-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-violet);
	color: var(--color-green);
	vertical-align: middle;
	margin-left: var(--space-1);
}

.verified-tick svg {
	width: 12px;
	height: 12px;
}

/* Feed / entity grids. */

.tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-4);
}

.tile {
	display: block;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
	color: var(--color-text);
	font-weight: 400;
	text-decoration: none;
}

.tile:hover {
	border-color: var(--color-brand);
}

.tile__title {
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.tile__meta {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

/* Video playback. */

.video-frame {
	width: 100%;
	max-height: 70vh;
	background: #000;
	border-radius: var(--radius-md);
}

.video-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--color-bg-sunken);
	border: 1px dashed var(--color-divider);
	border-radius: var(--radius-md);
	color: var(--color-text-muted);
}

/* Stats / metrics. */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.stat-tile {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: var(--space-4);
}

.stat-tile__label {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.stat-tile__value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-brand);
	margin-top: var(--space-1);
}

/* Tables (leaderboards, lists). */

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

th,
td {
	text-align: left;
	padding: var(--space-2) var(--space-3);
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

th {
	color: var(--color-text-muted);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.table-scroll {
	overflow-x: auto;
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

/* Buttons, inputs, forms — the mobile shapes: 10px radius, filled,
   borderless, uppercase-bold CTAs (PrimaryActionButton). */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	background: var(--color-bg-sunken);
	border: none;
	border-radius: var(--radius-md);
	color: var(--color-btn2-text);
	font-weight: 700;
	padding: var(--space-2) var(--space-4);
	cursor: pointer;
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	.btn {
		color: var(--color-text);
	}
}

.btn:hover {
	filter: brightness(0.96);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-primary {
	background: var(--color-cta);
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.btn-primary:hover {
	filter: brightness(1.05);
}

.btn-danger {
	background: var(--color-danger);
	color: var(--color-danger-text);
}

.input {
	background: var(--color-bg-raised);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	color: var(--color-text);
	padding: var(--space-2) var(--space-4);
}

.input::placeholder {
	color: var(--color-text-muted);
	font-weight: 500;
}

.input:focus {
	outline: 2px solid var(--color-brand);
	outline-offset: -1px;
}

textarea.input {
	min-height: 5rem;
	resize: vertical;
}

.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}

.field label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.form-actions {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

/* Badges, banners, chrome. The green badge follows the mobile
   pattern: guppieGreen fill with darkViolet content (verified ticks,
   highlighted spans). */

.badge {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: var(--color-bg-sunken);
	color: var(--color-violet-soft);
}

@media (prefers-color-scheme: dark) {
	.badge {
		color: var(--color-text);
	}
}

.badge-success {
	background: var(--color-green);
	color: var(--color-violet);
}

.badge-warning {
	background: var(--color-yellow);
	color: #ffffff;
}

.badge-danger {
	background: var(--color-danger);
	color: var(--color-danger-text);
}

.badge-accent {
	background: var(--color-brand);
	color: #ffffff;
}

.error-banner {
	background: color-mix(in srgb, var(--color-danger) 12%, var(--color-bg-raised));
	border: 1px solid var(--color-danger);
	color: var(--color-text);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
}

.notice-banner {
	background: color-mix(in srgb, var(--color-green) 15%, var(--color-bg-raised));
	border: 1px solid var(--color-green);
	color: var(--color-text);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	margin-bottom: var(--space-4);
}

/* Auth (login / register) shell — the mobile login look: full-bleed
   purple→pink gradient, white heading, floating white inputs, pink
   CTA. */

.auth-shell {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
	background: var(--gradient-auth);
}

.auth-card {
	width: 360px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.auth-brand {
	font-size: 2rem;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
	margin: 0 0 var(--space-4);
}

/* The auth form floats directly on the gradient, mobile-style: white
   floating inputs (always white, whatever the colour scheme), white
   labels, green links (the mobile register screen's link colour). */

.auth-card .field label {
	color: rgb(255 255 255 / 85%);
}

.auth-card .input {
	background: #ffffff;
	color: #171717;
	border: none;
	box-shadow: 0 4px 12px rgb(0 0 0 / 20%);
}

.auth-card .input::placeholder {
	color: #808080;
}

.auth-toggle {
	text-align: center;
	margin-top: var(--space-2);
	color: rgb(255 255 255 / 85%);
}

.auth-toggle .muted {
	color: rgb(255 255 255 / 85%);
}

.auth-toggle a {
	color: var(--color-green);
	font-weight: 600;
}

/* Misc. */

.toolbar {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-bottom: var(--space-4);
	flex-wrap: wrap;
}

.tabs {
	display: flex;
	gap: var(--space-2);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-4);
}

.tabs button {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--color-text-muted);
	font-weight: 700;
	padding: var(--space-2) var(--space-3);
	cursor: pointer;
}

.tabs button.active {
	color: var(--color-text);
	border-bottom-color: var(--color-brand);
}

/* Profile tab chips — the mobile grammar: a coloured 36px icon chip
   per tab with a white glyph and a matching underline when active
   (blue challenges, GREEN pledges — the mobile pledges accent —
   violet relations). */

.tabs--chips {
	border-bottom: none;
	gap: var(--space-4);
}

.tabs--chips button.tab-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	color: var(--color-text);
	font-weight: 700;
	font-size: 0.85rem;
	border-bottom: 3px solid transparent;
	padding: var(--space-2) var(--space-2) var(--space-2);
}

.tab-chip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	color: #ffffff;
}

.tab-chip__icon svg {
	width: 22px;
	height: 22px;
}

.tab--blue .tab-chip__icon {
	background: var(--color-blue);
}

.tab--green .tab-chip__icon {
	background: var(--color-green);
	color: var(--color-violet);
}

.tab--yellow .tab-chip__icon {
	background: var(--color-yellow);
}

.tab--bronze .tab-chip__icon {
	background: var(--color-bronze);
}

.tab--violet .tab-chip__icon {
	background: var(--color-violet-soft);
}

.tabs--chips button.tab--blue.active {
	border-bottom-color: var(--color-blue);
}

.tabs--chips button.tab--green.active {
	border-bottom-color: var(--color-green);
}

.tabs--chips button.tab--yellow.active {
	border-bottom-color: var(--color-yellow);
}

.tabs--chips button.tab--bronze.active {
	border-bottom-color: var(--color-bronze);
}

.tabs--chips button.tab--violet.active {
	border-bottom-color: var(--color-violet-soft);
}

.pagination {
	display: flex;
	gap: var(--space-2);
	align-items: center;
	margin-top: var(--space-4);
}

/* The search box — the mobile search screen's rounded white field
   with a grey magnifier. */

.search-box {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex: 1;
	background: var(--color-bg-sunken);
	border-radius: 8px;
	padding: var(--space-2) var(--space-3);
	color: var(--color-text-muted);
}

.search-box svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.search-box input {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	font-weight: 600;
	color: var(--color-text);
}

.search-box input::placeholder {
	color: var(--color-text-muted);
	font-weight: 500;
}

/* The profile header — stats row under the identity, like the mobile
   profile's follower counts. */

.profile-stats {
	display: flex;
	gap: var(--space-8);
	margin-top: var(--space-3);
}

.profile-stat {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.profile-stat__value {
	font-weight: 700;
	font-size: 1.2rem;
	color: var(--color-violet-soft);
}

.profile-stat__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

@media (prefers-color-scheme: dark) {
	.profile-stat__value {
		color: var(--color-text);
	}
}

.profile-header {
	background: var(--color-bg-header);
}

/* Gradient cards — the mobile organisation page: white-on-gradient,
   centred. */

.card--gradient {
	background: var(--gradient-brand-blue);
	border: none;
	color: #ffffff;
	text-align: center;
}

.card--gradient .page-title {
	color: #ffffff;
}

.card--gradient .muted {
	color: rgb(255 255 255 / 75%);
}

.org-header__avatar {
	display: flex;
	justify-content: center;
	margin-bottom: var(--space-3);
}

.org-header__actions {
	display: flex;
	justify-content: center;
	margin-top: var(--space-3);
}

/* Avatars — circular with the mobile white-ring style (the ring
   follows the surface colour in dark mode). The fallback disc is the
   mobile pattern: a brand-magenta fill when there is no image. */

.avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-bg-sunken);
	box-shadow: 0 0 0 2px var(--color-bg), var(--shadow-card);
	flex-shrink: 0;
}

.avatar--sm {
	width: 36px;
	height: 36px;
}

.avatar--lg {
	width: 88px;
	height: 88px;
	box-shadow: 0 0 0 3px var(--color-bg), var(--shadow-card);
}

.avatar--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-brand);
	color: #ffffff;
	font-weight: 700;
	font-size: 1rem;
}

.avatar--fallback.avatar--lg {
	font-size: 2rem;
}

/* On dark chrome (the feed card's violet author bar, gradient cards)
   the ring is always white, like the mobile app. */

.feed-card__author .avatar,
.card--gradient .avatar {
	box-shadow: 0 0 0 2px #ffffff, var(--shadow-card);
}

.card--gradient .avatar--lg {
	box-shadow: 0 0 0 3px #ffffff, var(--shadow-card);
}

.row {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.row--between {
	justify-content: space-between;
}

.muted {
	color: var(--color-text-muted);
}

.unread-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-cta);
	margin-right: var(--space-2);
}