/* ==========================================================================
   Mythiq.net — Mod authors
   Loaded alongside mods.css on /authors/ and /authors/<handle>/, and on the
   mod page (for the author panel and the byline badge).

   IT IS A SUPPLEMENT TO mods.css, NOT A SECOND CATALOGUE STYLESHEET. The hero
   band, the breadcrumbs, the toolbar, the panels, the buttons, the empty state,
   the pagination and the mod grid all come from there unchanged — an author
   page is part of the mods section and a reader arriving from a byline should
   not feel they have left it. What is in here is only what mods.css has no
   component for: a person.

   Same tokens as everything else (style.css): --bg-color / --card-bg /
   --text-white / --text-light / --text-muted / --mythiq-blue /
   --mythiq-hover-blue / --font-heading. No new colours except the two tier
   accents, which are the point of a badge.

   Breakpoints match the design system: 1024px and 768px.

   Sections, in page order:
     Avatars -> Tier badges -> Directory (search, grid, card) ->
     Profile head -> Profile body -> Sidebar -> Byline + author panel ->
     Settings editor -> Responsive
   ========================================================================== */

/* --- Avatars ------------------------------------------------------------
   One component, four sizes, used by the card, the profile head, the mod
   page's author panel and the comment thread. The plate fallback is not a
   placeholder to be replaced later: most authors will never upload a picture,
   so the initial-on-a-gradient IS the normal state and is styled as something
   deliberate rather than as a hole. Same argument _card.php makes for giving a
   coverless mod a gradient instead of a blank box. */

.author-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.10);
	font-family: var(--font-heading);
	font-weight: 700;
	color: var(--text-white);
	line-height: 1;
	user-select: none;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.author-avatar.is-plate {
	background-image:
		radial-gradient(120% 120% at 30% 0%, color-mix(in srgb, var(--mythiq-blue) 45%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 65%),
		linear-gradient(145deg, #26282f 0%, #16171a 100%);
}

.author-avatar-sm { width: 34px;  height: 34px;  font-size: 15px; }
.author-avatar-md { width: 48px;  height: 48px;  font-size: 20px; }
.author-avatar-lg { width: 64px;  height: 64px;  font-size: 26px; }
.author-avatar-xl { width: 112px; height: 112px; font-size: 44px; }

/* --- Tier badges --------------------------------------------------------
   The visual weight ladder IS the meaning: verified is a quiet confirmation in
   the site's own blue, partner and exclusive are warmer and brighter because
   they are claims we are making on the author's behalf and a reader should be
   able to tell them apart at a glance without reading the word.

   'author' never renders one — author_badge_html() returns '' for it. A badge
   everyone wears is decoration. */

.author-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	vertical-align: middle;
	margin-left: 10px;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	line-height: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
}
.author-badge i { font-size: 11px; }

.author-badge-verified {
	color: var(--mythiq-hover-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	border-color: color-mix(in srgb, var(--mythiq-blue) 34%, transparent);
}
.author-badge-partner {
	color: #7fd6a4;
	background-color: rgba(70, 190, 130, 0.13);
	border-color: rgba(70, 190, 130, 0.32);
}
.author-badge-exclusive {
	color: #e8c169;
	background-color: rgba(224, 178, 84, 0.14);
	border-color: rgba(224, 178, 84, 0.36);
}

/* NOT a standing — the other three say what an author has earned, this one says
   what the page IS: an attribution of work published elsewhere, with no account
   behind it. So it is deliberately the quietest chip on the page, in the muted
   grey the site uses for metadata rather than in any accent: an external author
   is not being demoted, they are being described. */
.author-badge-external {
	color: var(--text-muted);
	background-color: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
}

/* --- Directory ----------------------------------------------------------- */

/* The toolbar's search field. Not .mods-searchbar — that is the masthead's
   full-width hero bar; this is one control in a row beside two selects, so it
   borrows the select's box and adds the icon. */
.authors-search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: var(--radius-sm);
	min-height: 44px;
}
.authors-search > i { color: var(--text-muted); font-size: 14px; }
.authors-search input {
	background: none;
	border: 0;
	color: var(--text-white);
	font-size: 15px;
	width: 210px;
	max-width: 46vw;
	padding: 10px 0;
}
.authors-search input:focus { outline: none; }
.authors-search input::placeholder { color: var(--text-muted); }
.authors-search:focus-within { border-color: color-mix(in srgb, var(--mythiq-blue) 55%, transparent); }

/* auto-fill rather than auto-fit, the same choice the screenshot grid explains:
   with auto-fit a directory holding two authors stretches both cards across the
   full width and a 700px-wide card with one 64px avatar on it reads as a layout
   accident. auto-fill keeps the track width the same whether there are two
   authors or two hundred. */
.authors-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 44px;
}
/* The featured strip is the same grid, capped at four so it stays one row on a
   wide screen — it is a shelf, not a second listing. */
.authors-grid.is-featured { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 0; }
.authors-featured { margin-bottom: 8px; }

.author-card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"avatar body"
		"stats  stats";
	align-items: center;
	gap: 16px;
	padding: 20px;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.author-card:hover,
.author-card:focus-visible {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--mythiq-blue) 42%, transparent);
	box-shadow: var(--shadow-glow);
}
.author-card:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 3px; }

/* A featured card carries a hairline of the site's blue down its leading edge.
   Deliberately not a full accent border: the badge already names the standing,
   and a grid where four cards have loud frames stops reading as one list. */
.author-card.is-featured { border-color: color-mix(in srgb, var(--mythiq-blue) 28%, transparent); }
.author-card.is-featured::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	background-color: var(--mythiq-blue);
}

.author-card > .author-avatar { grid-area: avatar; }
.author-card-body { grid-area: body; min-width: 0; }

.author-card-name {
	display: flex;
	align-items: center;
	gap: 2px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 24px;
	color: var(--text-white);
	overflow-wrap: anywhere;
}
/* On a card the badge is the icon alone — the label is screen-reader only
   (author_badge_html($tier, false)) — so it needs no room for text. */
.author-card-name .author-badge { margin-left: 8px; padding: 4px 6px; }

.author-card-handle {
	display: block;
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 2px;
	overflow-wrap: anywhere;
}
.author-card-headline {
	display: block;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-light);
	margin-top: 8px;
	/* Two lines, then clipped: the headline is a hook on a tile, and an author
	   who writes a paragraph into it must not push the stats row off the card
	   and make one tile twice the height of its neighbours. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.author-card-stats {
	grid-area: stats;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	padding-top: 14px;
	margin-top: 2px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 14px;
	color: var(--text-light);
}
.author-card-stat { display: inline-flex; align-items: center; gap: 7px; }
.author-card-stat i { color: var(--text-muted); font-size: 13px; }

/* --- Profile head -------------------------------------------------------- */

.author-top { margin-bottom: 36px; }

.author-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: start;
	gap: 28px;
}
.author-head-text { min-width: 0; }

.author-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--text-white);
	overflow-wrap: anywhere;
}
/* The badge rides the heading's baseline rather than its line box, so a 40px
   name does not drag an 11px pill down with its descenders. */
.author-name .author-badge { position: relative; top: -4px; }

.author-handle { font-size: 15px; color: var(--text-muted); margin-top: 6px; }

.author-headline {
	font-size: 19px;
	line-height: 29px;
	color: var(--text-light);
	margin-top: 14px;
	max-width: 640px;
	overflow-wrap: anywhere;
}

/* Our statement about the author, visually separated from anything they wrote —
   see the note in the view. */
.author-tier-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 14px;
	padding: 12px 14px;
	max-width: 640px;
	border-radius: var(--radius-md);
	background-color: color-mix(in srgb, var(--mythiq-blue) 9%, transparent);
	border: 1px solid color-mix(in srgb, var(--mythiq-blue) 22%, transparent);
	font-size: 15px;
	line-height: 23px;
	color: var(--text-light);
}
.author-tier-note i { color: var(--mythiq-hover-blue); margin-top: 4px; }

/* Same panel, no accent. The tier note is a claim we are making FOR an author
   and earns the blue; this one is a disclaimer about what the page is, and
   dressing a correction in the brand colour would read as a promotion. */
.author-external-note {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.10);
}
.author-external-note i { color: var(--text-muted); }
.author-external-note strong { color: var(--text-white); }

/* On a card the external chip is the icon only — the label is screen-reader
   text — so it needs no room for words. */
.author-card-name .author-badge-external { padding: 4px 6px; }

.author-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-top: 16px;
	font-size: 14px;
	color: var(--text-muted);
}
.author-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.author-hidden-note { margin-bottom: 24px; }

/* The numbers block. A definition list rather than three divs: each figure is a
   term and a value, and that is what a screen reader should hear. */
.author-stats {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}
.author-stats > div {
	min-width: 108px;
	padding: 16px 18px;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	text-align: center;
}
.author-stats dt {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}
.author-stats dd {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 26px;
	color: var(--text-white);
}
.author-stat-sub { font-size: 14px; color: var(--text-muted); font-weight: 400; }

/* The exclusives tile. Tinted, and the only one of the four that is — the other
   three are measurements every author has, this one is a distinction not every
   author has, and it renders at all only when the count is above zero (see
   views/authors/view.php). The violet is --mods-ex from mods.css, which this
   page also loads; it is restated as a literal rather than inherited, because
   authors.css is loaded on its own by the directory page and a token that
   resolves on one page and not the other is worse than a repeated hex. */
/* Written as a descendant of .author-stats, not as a bare class: the base tile
   is `.author-stats > div`, which outranks a lone class and would keep its own
   border whatever this said. */
.author-stats > .author-stat-exclusive {
	border-color: rgba(167, 139, 250, 0.34);
	background-color: rgba(167, 139, 250, 0.10);
}
.author-stats > .author-stat-exclusive dt { color: #a78bfa; }

/* --- Profile body -------------------------------------------------------- */

.author-body { padding-bottom: 56px; }

.author-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 44px;
	align-items: start;
}
.author-main { min-width: 0; }

/* The first heading in the column sits under the hero band, which already
   provides the separation .mods-h2's top margin exists for. */
.author-main > section:first-child .mods-h2 { margin-top: 0; }

.author-bio {
	font-size: 18px;
	line-height: 30px;
	color: var(--text-light);
	overflow-wrap: anywhere;
}

.author-mods-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.author-mods-head .mods-h2 { flex: 1 1 auto; border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.author-sort { flex: 0 0 auto; display: flex; gap: 8px; }
/* One rule under the heading and its control together, rather than under the
   heading alone — otherwise the select hangs below the line it belongs to. */
.author-mods-head {
	margin: 48px 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.author-main > section:first-child .author-mods-head { margin-top: 0; }

/* --- Sidebar ------------------------------------------------------------- */

.author-side {
	min-width: 0;
	position: sticky;
	top: calc(var(--header-offset) + var(--header-height) + 24px);
	align-self: start;
}

.author-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.author-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	text-decoration: none;
	transition: border-color 0.16s ease, background-color 0.16s ease;
}
.author-link:hover,
.author-link:focus-visible {
	border-color: color-mix(in srgb, var(--mythiq-blue) 42%, transparent);
	background-color: color-mix(in srgb, var(--mythiq-blue) 7%, transparent);
}
.author-link:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 2px; }
.author-link > i:first-child { flex: 0 0 auto; width: 18px; text-align: center; color: var(--mythiq-hover-blue); font-size: 16px; }
.author-link-text { min-width: 0; flex: 1 1 auto; }
.author-link-label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--text-white);
	overflow-wrap: anywhere;
}
/* The destination, in plain text under the label. A reader should be able to
   see where an outbound link goes without hovering for the status bar. */
.author-link-host {
	display: block;
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
	overflow-wrap: anywhere;
}
.author-link-out { flex: 0 0 auto; color: var(--text-muted); font-size: 12px; }
.author-links-note { margin-top: 14px; font-size: 14px; line-height: 21px; }

.author-games { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.author-games a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	color: var(--text-light);
	text-decoration: none;
	font-size: 16px;
}
.author-games a:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--text-white); }
.author-games-count {
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	color: var(--text-muted);
}

.author-tier-panel .mods-panel-title .author-badge { margin-left: 0; }

/* --- Byline + the mod page's author panel -------------------------------
   These two live on /mods/ pages, which is why they are in this file rather
   than mods.css: they are the author component appearing somewhere else, and
   keeping them here means the byline, the card and the profile head cannot
   drift apart. mods/view.php loads authors.css for them. */

/* The byline's link is a name in a sentence, so it is underlined on hover
   rather than being made a button. */
.mods-detail-byline .author-byline-link { color: var(--text-white); text-decoration: none; }
.mods-detail-byline .author-byline-link:hover { text-decoration: underline; }
.mods-detail-byline .author-badge { margin-left: 8px; }

.author-panel-head {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	margin-bottom: 14px;
}
.author-panel-name {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
	color: var(--text-white);
	overflow-wrap: anywhere;
}
.author-panel-head:hover .author-panel-name { color: var(--mythiq-hover-blue); }
.author-panel-sub { display: block; font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.author-panel-headline {
	font-size: 15px;
	line-height: 23px;
	color: var(--text-light);
	margin-bottom: 14px;
	overflow-wrap: anywhere;
}
/* The panel's links are icon-only chips: the sidebar is 330px and the labelled
   rows the profile page uses would take four lines of it. The accessible name
   comes from the sr-only text inside each chip. */
.author-panel-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.author-panel-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-md);
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-light);
	font-size: 15px;
	text-decoration: none;
}
.author-panel-link:hover,
.author-panel-link:focus-visible {
	border-color: color-mix(in srgb, var(--mythiq-blue) 45%, transparent);
	color: var(--mythiq-hover-blue);
}
.author-panel-link:focus-visible { outline: 2px solid var(--mythiq-blue); outline-offset: 2px; }

.author-panel-stats {
	display: flex;
	gap: 20px;
	padding-top: 14px;
	margin-bottom: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 14px;
	color: var(--text-light);
}
.author-panel-stats span { display: inline-flex; align-items: center; gap: 7px; }
.author-panel-stats i { color: var(--text-muted); font-size: 13px; }

/* A comment's byline. The avatar is small and the name links only when that
   author has a page — see the view. .mods-comment-head is already a flex row in
   mods.css, so the avatar only needs to be told not to shrink. */
/* align-self, because .mods-comment-head aligns on the BASELINE: a round avatar
   has no text baseline, so a flex box falls back to its bottom margin edge and
   the picture sits low against the name it belongs to. The negative margin pulls
   it inside the row's 12px gap, which is right between a name and a date and too
   wide between a face and the name attached to it. */
.mods-comment-head .author-avatar { flex: 0 0 auto; align-self: center; margin-right: -4px; }
.mods-comment-author .author-badge {
	margin-left: 6px;
	padding: 3px 6px;
	font-size: 10px;
	line-height: 10px;
}
a.mods-comment-author { text-decoration: none; }
a.mods-comment-author:hover { text-decoration: underline; }

/* --- Settings editor ----------------------------------------------------
   The author form lives inside the account shell (account.css), so this styles
   only the parts that shell has no component for: the avatar preview beside its
   file input, and the repeating link rows. */

.author-edit-avatar {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}
.author-edit-avatar-fields { flex: 1 1 260px; min-width: 0; }

.author-link-rows { display: flex; flex-direction: column; gap: 10px; }
.author-link-row {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 150px;
	gap: 10px;
	align-items: center;
}
.author-link-row select,
.author-link-row input {
	width: 100%;
	min-width: 0;
}
/* The row's own header, so the three columns are labelled once rather than six
   times. Hidden from assistive tech, which reads each field's own label. */
.author-link-heads {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) 150px;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 8px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
	/* The sidebar goes under the mods, not above them: somebody who opened an
	   author page came for the work. Sticky is dropped with the column — a
	   sticky element in a single-column flow just pins itself to the top of a
	   section nobody is reading. */
	.author-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.author-side { position: static; }

	.author-head { grid-template-columns: auto minmax(0, 1fr); }
	.author-stats { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.author-head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.author-avatar-xl { width: 84px; height: 84px; font-size: 34px; }

	/* Three stat boxes at 108px minimum overflow a 360px screen. Letting them
	   wrap into a row of two plus one keeps every figure readable rather than
	   shrinking all three below the size the numbers need. */
	.author-stats { flex-wrap: wrap; }
	.author-stats > div { flex: 1 1 96px; min-width: 96px; }

	.authors-grid,
	.authors-grid.is-featured { grid-template-columns: minmax(0, 1fr); }

	.authors-search input { width: 100%; max-width: none; }
	.authors-search { flex: 1 1 100%; }

	/* The link editor stacks: three controls across a phone leaves the URL
	   field about forty pixels wide. */
	.author-link-row { grid-template-columns: minmax(0, 1fr); }
	.author-link-heads { display: none; }
}