/* ==========================================================================
   Mythiq.net — Support centre
   Loaded only on /support/* (hub, contact form, thread, member list).

   Built entirely on the tokens already declared in style.css:
   --bg-color / --card-bg / --text-white / --text-light / --text-muted /
   --mythiq-blue / --mythiq-hover-blue / --shadow-glow / --header-height /
   --header-offset. No new colours and no new type sizes — the support pages
   have to read as the same site as the newsroom sitting next to them.

   Breakpoints match the rest of the design system: 1024px and 768px.
   ========================================================================== */

/* --- Shared bits --------------------------------------------------------- */

/* The 87x3px blue rule the legal pages already use as their section device. */
.support-rule {
	display: block;
	width: 87px;
	height: 3px;
	background-color: var(--mythiq-blue);
	margin-bottom: 24px;
}

.support-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


.support-link-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 0;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	cursor: pointer;
	transition: color var(--transition-speed);
}

.support-link-btn:hover {
	color: var(--mythiq-hover-blue);
}

.support-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	margin-bottom: 34px;
}

.support-back:hover {
	color: var(--mythiq-hover-blue);
}

/* --- Hero ---------------------------------------------------------------- */
/* The header is a floating pill (16px inset, 66px tall), so the first band has
   to clear it explicitly — nothing above it does. */

.support-hero {
	position: relative;
	padding: calc(var(--header-offset) + var(--header-height) + 72px) 0 58px;
	background-color: var(--bg-color);
	text-align: center;
	/* Deliberately NOT overflow:hidden — the search results panel is absolutely
	   positioned and hangs below this band, and clipping it cut the answers off
	   at the hero's bottom edge. The image and scrim layers are inset:0, so
	   there is nothing here that needs clipping anyway. The scrim's last stop
	   is the canvas colour, so the band still ends on the page background with
	   no seam against the browse section. */
}

/* The community page's wallpaper, already in the repo. Held on its own layer
   rather than as a background on .support-hero so the image can be faded
   independently of the scrim sitting over it. */
.support-hero-img {
	position: absolute;
	inset: 0;
	background-image: url('../img/uploads/2019/10/planets_wallpaper-min.jpg');
	background-size: cover;
	background-position: center 32%;
	opacity: 0.55;
}

.support-hero-scrim {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--mythiq-blue) 16%, transparent) 0%, color-mix(in srgb, var(--mythiq-blue) 0%, transparent) 60%),
		/* Reaches solid canvas at 94%, not 100%: a gradient that lands exactly on
		   the element's edge dithers against the photo behind it and leaves a
		   faint seam. The last few percent are flat colour, so the band ends on
		   the page background with nothing to see. */
		linear-gradient(180deg,
			rgba(32, 33, 37, 0.42) 0%,
			rgba(32, 33, 37, 0.60) 42%,
			rgba(32, 33, 37, 0.92) 78%,
			var(--bg-color) 94%,
			var(--bg-color) 100%);
}

/* The two layers above are position:absolute, so the content needs a stacking
   context of its own or the scrim paints over the text. */
.support-hero-content {
	position: relative;
	z-index: 1;
}

.support-hero-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 59px;
	line-height: 66px;
	color: var(--text-white);
	margin-bottom: 16px;
}

/* A short standalone line rather than a paragraph of orientation, so it carries
   the weight of a subtitle instead of body copy. */
.support-hero-sub {
	max-width: 640px;
	margin: 0 auto;
	font-size: 25px;
	line-height: 34px;
	color: var(--text-light);
}

/* Search: hidden in the markup, revealed by support.js. With scripting off it
   would be a field that answers nothing. */
.support-search {
	position: relative;
	max-width: 620px;
	margin: 38px auto 0;
	text-align: left;
}

.support-search[hidden] {
	display: none;
}

.support-search-field {
	position: relative;
	display: flex;
	align-items: center;
}

.support-search-icon {
	position: absolute;
	left: 22px;
	font-size: 16px;
	color: var(--text-muted);
	pointer-events: none;
}

.support-search-input {
	width: 100%;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 24px;
	color: var(--text-white);
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	padding: 18px 54px 18px 54px;
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.support-search-input::placeholder {
	color: var(--text-muted);
}

/* WebKit draws its own clear affordance on input[type=search]; without this it
   sits alongside ours and the field shows two × buttons. */
.support-search-input::-webkit-search-cancel-button,
.support-search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.support-search-input:focus {
	outline: none;
	border-color: var(--mythiq-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mythiq-blue) 22%, transparent);
}

.support-search-clear {
	position: absolute;
	right: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--text-light);
	font-size: 12px;
	cursor: pointer;
	transition: background-color var(--transition-speed), color var(--transition-speed);
}

.support-search-clear:hover {
	background-color: rgba(255, 255, 255, 0.16);
	color: var(--text-white);
}

/* The rule above sets `display`, which beats the UA stylesheet's
   `[hidden] { display: none }` — so the hidden state needs saying explicitly,
   or the clear button shows over an empty field. */
.support-search-clear[hidden] {
	display: none;
}

/* --- Search results panel ------------------------------------------------ */
/* Answers land here, directly under the field. This is the whole point of the
   redesign: the effect of typing has to be visible where the typing happens,
   not applied to a list further down the page that nobody can see. */

.support-results {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 20;
	background-color: #16171a;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-md);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	text-align: left;
}

.support-results[hidden] {
	display: none;
}

.support-results-list {
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}

.support-result {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 20px;
	cursor: pointer;
	border-left: 3px solid transparent;
	transition: background-color 0.12s, border-color 0.12s;
}

.support-result + .support-result {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.support-result.is-active {
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	border-left-color: var(--mythiq-blue);
}

.support-result-cat {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mythiq-blue);
}

.support-result-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: var(--text-white);
}

.support-result-snip {
	font-size: 14px;
	line-height: 20px;
	color: var(--text-light);
	/* One line only: the panel is a shortlist, not the answer itself. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.support-results-none {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
}

.support-results-none[hidden] {
	display: none;
}

.support-results-none-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: var(--text-white);
}

.support-results-none-text {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-light);
}

.support-results-none-text a {
	color: var(--mythiq-hover-blue);
	text-decoration: underline;
}

.support-hero-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

/* --- Known-issues banner ------------------------------------------------- */

.support-notice-band {
	padding-bottom: 8px;
}

.support-notice {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-left: 3px solid var(--mythiq-blue);
	border-radius: var(--radius-md);
	padding: 24px 28px;
}

.support-notice-warning {
	border-left-color: #a58655; /* the site's existing ESO/WoW gold accent */
}

.support-notice-icon {
	font-size: 20px;
	line-height: 28px;
	color: var(--mythiq-blue);
	flex: 0 0 auto;
}

.support-notice-warning .support-notice-icon {
	color: #a58655;
}

.support-notice-title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 28px;
	color: var(--text-white);
	margin-bottom: 4px;
}

.support-notice-text p {
	color: var(--text-light);
	margin: 0;
}

/* --- Help centre --------------------------------------------------------- */

.support-kb {
	padding: 56px 0 90px;
}

.support-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

/* The rule and the heading are one unit on the left; only the live count is
   pushed to the right. Without this wrapper all three become flex items and
   space-between strands the heading in the middle of the row. */
.support-section-title {
	min-width: 0;
}

.support-section-head h2,
.support-contact-main h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 39px;
	line-height: 46px;
	color: var(--text-white);
}

.support-result-count {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	margin: 0;
}

.support-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 40px;
}

.support-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-light);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.5px;
	padding: 9px 16px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: color var(--transition-speed), background-color var(--transition-speed), border-color var(--transition-speed);
}

.support-chip:hover:not(:disabled) {
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.25);
}

.support-chip.is-active {
	background-color: var(--mythiq-blue);
	border-color: var(--mythiq-blue);
	color: #ffffff;
}

.support-chip:disabled {
	opacity: 0.35;
	cursor: default;
}

.support-chip:focus-visible {
	outline: 2px solid var(--mythiq-hover-blue);
	outline-offset: 2px;
}

.support-chip i {
	font-size: 12px;
}

.support-chip-count {
	font-size: 12px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background-color: rgba(0, 0, 0, 0.28);
	color: inherit;
}

/* Each category is a bounded card rather than a run of hairline-separated
   rows. Thirteen near-identical bold lines under faint labels read as one wall
   of text with nothing to fix the eye on; six panels, each opened by an icon
   tile and a count, give the section a spine you can scan. */
.support-group {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 16px;
}

.support-group[hidden] {
	display: none;
}

.support-group-title {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* The anchor. Same tinted-tile device as the contact channels, so the two
   sections of the page share one visual language. */
.support-group-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-md);
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	color: var(--mythiq-blue);
	font-size: 16px;
}

.support-group-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 22px;
	line-height: 30px;
	color: var(--text-white);
}

.support-group-count {
	margin-left: auto;
	flex: 0 0 auto;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	line-height: 16px;
	color: var(--text-muted);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-pill);
	padding: 5px 12px;
}

/* Articles are <details>: the page is complete and readable without JS, and
   the accordion costs no script of its own. */
.support-article {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	/* An inset accent bar rather than a border, so opening an article does not
	   shift the text by a pixel. */
	box-shadow: inset 0 0 0 0 var(--mythiq-blue);
	transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.support-article[hidden] {
	display: none;
}

/* The card's own border closes the list, so the last row's rule would double
   it. :last-child is safe here: a chip filters by category and a card IS one
   category, so a visible card never contains a hidden row. */
.support-group-items .support-article:last-child {
	border-bottom: 0;
}

.support-article[open],
.support-article:hover {
	background-color: rgba(255, 255, 255, 0.02);
	box-shadow: inset 3px 0 0 0 var(--mythiq-blue);
}

/* Briefly marks the article a search result jumped to, so the scroll resolves
   into "this one" rather than leaving the reader to work out which of the
   items on screen they actually landed on. */
.support-article.is-flash {
	background-color: color-mix(in srgb, var(--mythiq-blue) 12%, transparent);
	box-shadow: inset 3px 0 0 0 var(--mythiq-hover-blue);
	transition: background-color 0.9s ease-out, box-shadow 0.9s ease-out;
}

.support-article-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 26px;
	cursor: pointer;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--text-white);
	list-style: none;
}

/* Safari still paints its own disclosure triangle without this. */
.support-article-q::-webkit-details-marker {
	display: none;
}

.support-article-q:focus-visible {
	outline: 2px solid var(--mythiq-hover-blue);
	outline-offset: -2px;
}

.support-article-caret {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--text-muted);
	transition: transform var(--transition-speed), color var(--transition-speed);
}

.support-article[open] .support-article-caret {
	transform: rotate(180deg);
	color: var(--mythiq-blue);
}

.support-article-a {
	padding: 0 26px 24px;
	max-width: 900px;
	color: var(--text-light);
}

.support-article-a p {
	margin-bottom: 16px;
}

.support-article-a p:last-child,
.support-article-a ul:last-child,
.support-article-a ol:last-child {
	margin-bottom: 0;
}

.support-article-a ul,
.support-article-a ol {
	/* style.css strips list padding globally; restore it or the markers sit
	   outside the text column. */
	padding-left: 1.4em;
	margin-bottom: 16px;
}

.support-article-a li {
	margin-bottom: 6px;
}

.support-article-a a {
	color: var(--mythiq-hover-blue);
	text-decoration: underline;
}

.support-article-a strong {
	color: var(--text-white);
}

.support-empty {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: center;
	padding: 56px 0;
}

.support-empty[hidden] {
	display: none;
}

.support-empty-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	color: var(--text-white);
}

.support-empty-text {
	color: var(--text-light);
}

.support-empty-text a {
	color: var(--mythiq-hover-blue);
	text-decoration: underline;
}

/* --- Contact band -------------------------------------------------------- */

.support-contact-band {
	background-color: var(--card-bg);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 82px 0;
}

.support-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	/* The left column is deliberately short now, so it is centred against the
	   channel cards rather than top-aligned — start-aligned it left a large
	   empty block under the buttons. */
	align-items: center;
}

.support-contact-main p {
	color: var(--text-light);
	max-width: 560px;
}

.support-contact-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.support-contact-note {
	margin-top: 22px;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
}

.support-channels {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.support-channel {
	display: flex;
	align-items: center;
	gap: 18px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 20px 22px;
	transition: border-color var(--transition-speed), background-color var(--transition-speed);
}

a.support-channel:hover {
	border-color: color-mix(in srgb, var(--mythiq-blue) 50%, transparent);
	background-color: rgba(255, 255, 255, 0.05);
}

.support-channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background-color: color-mix(in srgb, var(--mythiq-blue) 14%, transparent);
	color: var(--mythiq-blue);
	font-size: 18px;
}

.support-channel-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.support-channel-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 24px;
	color: var(--text-white);
}

.support-channel-sub {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
}

.support-channel-sub a {
	color: var(--text-light);
	text-decoration: underline;
}

.support-channel-arrow {
	margin-left: auto;
	font-size: 13px;
	color: var(--text-muted);
	transition: transform var(--transition-speed), color var(--transition-speed);
}

a.support-channel:hover .support-channel-arrow {
	color: var(--mythiq-hover-blue);
	transform: translateX(3px);
}

/* --- Sub-page top band (form, thread, list) ------------------------------ */

/* Same wallpaper as the hub hero but much fainter, so the sub-pages read as
   part of one section rather than a flat page bolted onto a rich one. It fades
   out entirely by the bottom of the band. */
.support-page-top {
	position: relative;
	padding: calc(var(--header-offset) + var(--header-height) + 56px) 0 24px;
	background-image:
		/* Solid canvas from 88% down — see the note on .support-hero-scrim. */
		linear-gradient(180deg,
			rgba(32, 33, 37, 0.74) 0%,
			rgba(32, 33, 37, 0.92) 52%,
			var(--bg-color) 88%,
			var(--bg-color) 100%),
		url('../img/uploads/2019/10/planets_wallpaper-min.jpg');
	background-size: cover, cover;
	background-position: center, center 28%;
	background-repeat: no-repeat, no-repeat;
}

.support-page-top .container {
	position: relative;
	z-index: 1;
}

.support-page-top h1 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 44px;
	line-height: 52px;
	color: var(--text-white);
}

.support-lead {
	margin-top: 14px;
	color: var(--text-light);
	max-width: 620px;
}

.support-ticket-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 20px;
}

.support-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
}

.support-meta-item i {
	font-size: 12px;
}

/* Status pills. Functional signal only — never decoration. */
.support-status {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
}

.support-status-open {
	background-color: color-mix(in srgb, var(--mythiq-blue) 16%, transparent);
	border-color: color-mix(in srgb, var(--mythiq-blue) 45%, transparent);
	color: #6fc2f0;
}

.support-status-pending {
	background-color: rgba(165, 134, 85, 0.16);
	border-color: rgba(165, 134, 85, 0.45);
	color: #d2ac74;
}

.support-status-resolved,
.support-status-closed {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--text-muted);
}

/* --- Forms --------------------------------------------------------------- */

.support-form-section,
.support-thread-section {
	padding: 46px 0 100px;
}

.support-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
	gap: 50px;
	align-items: start;
}

.support-form {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 38px 40px 34px;
}

.support-field {
	margin-bottom: 26px;
}

.support-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.support-field label {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-white);
	margin-bottom: 10px;
}

.support-field-optional {
	font-weight: 400;
	color: var(--text-muted);
}

.support-field input[type="text"],
.support-field input[type="email"],
.support-field textarea,
.support-select-wrap select,
.support-reply-card textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 26px;
	color: var(--text-white);
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	padding: 13px 16px;
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.support-field textarea,
.support-reply-card textarea {
	resize: vertical;
	min-height: 130px;
}

.support-field input::placeholder,
.support-field textarea::placeholder,
.support-reply-card textarea::placeholder {
	color: var(--text-muted);
}

.support-field input:focus,
.support-field textarea:focus,
.support-select-wrap select:focus,
.support-reply-card textarea:focus {
	outline: none;
	border-color: var(--mythiq-blue);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mythiq-blue) 20%, transparent);
}

.support-select-wrap {
	position: relative;
}

.support-select-wrap select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	cursor: pointer;
}

.support-select-wrap i {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--text-muted);
	pointer-events: none;
}

.support-field-hint {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--text-muted);
}

.support-field input[type="file"] {
	width: 100%;
	font-size: 15px;
	color: var(--text-light);
}

.support-field input[type="file"]::file-selector-button {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-white);
	background-color: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--radius-sm);
	padding: 9px 16px;
	margin-right: 14px;
	cursor: pointer;
	transition: background-color var(--transition-speed);
}

.support-field input[type="file"]::file-selector-button:hover {
	background-color: rgba(255, 255, 255, 0.14);
}

/* Identity strip shown to signed-in members: the controller takes the name and
   email from the session, so editable fields here would be a lie. */
.support-identity {
	display: flex;
	align-items: center;
	gap: 14px;
	background-color: color-mix(in srgb, var(--mythiq-blue) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--mythiq-blue) 22%, transparent);
	border-radius: var(--radius-md);
	padding: 16px 18px;
	margin-bottom: 26px;
}

.support-identity-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--mythiq-blue);
	color: #ffffff;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	flex: 0 0 auto;
}

.support-identity-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.support-identity-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--text-white);
}

.support-identity-mail {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Consent checkbox — same construction as the register form's. */
.support-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
	margin-bottom: 22px;
}

.support-consent input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

.support-consent-box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.03);
	color: #ffffff;
	font-size: 11px;
	transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.support-consent-box i {
	opacity: 0;
	transition: opacity 0.12s;
}

.support-consent input:checked + .support-consent-box {
	background-color: var(--mythiq-blue);
	border-color: var(--mythiq-blue);
}

.support-consent input:checked + .support-consent-box i {
	opacity: 1;
}

.support-consent input:focus-visible + .support-consent-box {
	outline: 2px solid var(--mythiq-hover-blue);
	outline-offset: 2px;
}

.support-consent-text {
	font-size: 16px;
	line-height: 24px;
	color: var(--text-light);
}

.support-consent-text a {
	color: var(--text-white);
	text-decoration: underline;
}

/* Deliberately not flex: the sentence contains an inline link, and a flex gap
   would break the line apart around it ("Sign in    before sending"). */
.support-signin-nudge {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	margin-bottom: 26px;
}

.support-signin-nudge i {
	margin-right: 8px;
	color: var(--mythiq-blue);
}

.support-signin-nudge a {
	color: var(--mythiq-hover-blue);
	text-decoration: underline;
}

/* Honeypot: present in the DOM, invisible to people. Not display:none, since
   some bots skip fields that are display:none. */
.support-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.support-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
}

.support-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-radius: var(--radius-md);
	padding: 14px 18px;
	margin-bottom: 26px;
	font-size: 16px;
	line-height: 24px;
}

.support-alert i {
	margin-top: 4px;
	flex: 0 0 auto;
}

.support-alert-error {
	background-color: rgba(180, 35, 24, 0.16);
	border: 1px solid rgba(248, 113, 113, 0.34);
	color: #f8a7a0;
}

.support-alert-ok {
	background-color: rgba(5, 150, 105, 0.14);
	border: 1px solid rgba(52, 211, 153, 0.32);
	color: #6fe0b4;
}

/* --- Form aside ---------------------------------------------------------- */

.support-form-aside {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.support-aside-card {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-left: 3px solid var(--mythiq-blue);
	border-radius: var(--radius-md);
	padding: 26px 28px;
}

.support-aside-card h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--text-white);
	margin-bottom: 12px;
}

.support-aside-card p {
	font-size: 16px;
	line-height: 25px;
	color: var(--text-light);
}

.support-aside-list {
	padding-left: 1.2em;
	font-size: 16px;
	line-height: 25px;
	color: var(--text-light);
}

.support-aside-list li {
	margin-bottom: 10px;
}

.support-aside-list li:last-child {
	margin-bottom: 0;
}

.support-aside-list a {
	color: var(--mythiq-hover-blue);
	text-decoration: underline;
}

/* --- Thread -------------------------------------------------------------- */

/* The thread reads better at a narrower measure than the full 1710px container.
   The page's top band has to adopt the SAME measure, or the heading starts at
   the page margin while the conversation under it sits centred — two different
   left edges on one page. */
.support-thread-wrap {
	max-width: 900px;
}

body.support-thread-page .support-page-top .container,
body.support-list-page .support-page-top .container {
	max-width: 900px;
}

.support-thread {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 34px;
}

.support-msg {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 24px 28px;
}

/* Staff replies carry the brand accent so the two voices are never confused. */
.support-msg.is-staff {
	border-left: 3px solid var(--mythiq-blue);
	background-color: color-mix(in srgb, var(--mythiq-blue) 6%, transparent);
}

.support-msg-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.support-msg-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex: 0 0 auto;
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--text-light);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
}

.support-msg.is-staff .support-msg-avatar {
	background-color: var(--mythiq-blue);
	color: #ffffff;
}

.support-msg-who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.support-msg-name {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 16px;
	line-height: 22px;
	color: var(--text-white);
}

.support-msg-time {
	font-size: 14px;
	line-height: 20px;
	color: var(--text-muted);
}

.support-msg-body {
	font-size: 17px;
	line-height: 27px;
	color: var(--text-light);
	overflow-wrap: anywhere;
}

.support-attachments {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.support-attachments a {
	display: block;
	width: 150px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition-speed);
}

.support-attachments a:hover {
	border-color: var(--mythiq-blue);
}

.support-attachments img {
	width: 100%;
	height: 96px;
	object-fit: cover;
}

.support-attachments span {
	display: block;
	padding: 8px 10px;
	font-size: 13px;
	line-height: 18px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.support-reply-card {
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 30px 32px;
}

.support-reply-card h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 32px;
	color: var(--text-white);
	margin-bottom: 16px;
}

.support-reply-hint {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
	margin-bottom: 16px;
}

.support-reply-files {
	margin-top: 20px;
	margin-bottom: 0;
}

.support-close-form {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.support-private-note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 24px;
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
}

.support-private-note i {
	margin-top: 4px;
}

/* --- Member ticket list -------------------------------------------------- */

.support-ticket-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.support-ticket-row {
	display: flex;
	align-items: center;
	gap: 24px;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 22px 26px;
	box-shadow: inset 0 0 0 0 var(--mythiq-blue);
	transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.support-ticket-row:hover {
	border-color: color-mix(in srgb, var(--mythiq-blue) 40%, transparent);
	box-shadow: inset 3px 0 0 0 var(--mythiq-blue);
}

.support-ticket-row-main {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.support-ticket-row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.support-ticket-row-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 21px;
	line-height: 28px;
	color: var(--text-white);
}

.support-ticket-row-sub {
	font-size: 15px;
	line-height: 22px;
	color: var(--text-muted);
}

.support-ticket-row-arrow {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--text-light);
	font-size: 14px;
	transition: border-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
}

.support-ticket-row:hover .support-ticket-row-arrow {
	border-color: var(--mythiq-blue);
	color: var(--mythiq-hover-blue);
	transform: translateX(3px);
}

.support-list-cta {
	margin-top: 30px;
}

.support-blank {
	text-align: center;
	background-color: var(--card-bg);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius-md);
	padding: 70px 30px;
}

.support-blank-icon {
	font-size: 34px;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.support-blank h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 26px;
	line-height: 34px;
	color: var(--text-white);
	margin-bottom: 10px;
}

.support-blank p {
	color: var(--text-light);
	margin-bottom: 26px;
}

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

@media (max-width: 1024px) {
	.support-hero-title {
		font-size: 46px;
		line-height: 54px;
	}

	.support-section-head h2,
	.support-contact-main h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.support-contact-grid,
	.support-form-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.support-page-top h1 {
		font-size: 36px;
		line-height: 44px;
	}
}

@media (max-width: 768px) {
	.support-hero {
		padding: calc(var(--header-offset) + var(--header-height) + 48px) 0 56px;
	}

	.support-hero-title {
		font-size: 36px;
		line-height: 44px;
	}

	.support-hero-sub {
		font-size: 20px;
		line-height: 28px;
	}

	.support-kb {
		padding: 52px 0 64px;
	}

	/* Chips stop fitting side by side; one sideways-scrolling row beats a
	   three-line wrapped block. */
	.support-chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.support-chips::-webkit-scrollbar {
		display: none;
	}

	.support-chip {
		flex: 0 0 auto;
	}

	.support-article-q {
		padding: 18px 16px;
		font-size: 18px;
		line-height: 26px;
	}

	.support-article-a {
		padding: 0 16px 22px;
	}

	.support-form {
		padding: 26px 22px 24px;
	}

	.support-field-row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.support-msg,
	.support-reply-card {
		padding: 20px 18px;
	}

	.support-ticket-row {
		padding: 18px 18px;
		gap: 14px;
	}

	.support-ticket-row-arrow {
		display: none;
	}

	.support-ticket-row-title {
		font-size: 18px;
		line-height: 25px;
	}

	.support-contact-band {
		padding: 56px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.support-article,
	.support-article-caret,
	.support-channel-arrow,
	.support-ticket-row,
	.support-ticket-row-arrow {
		transition: none;
	}
}