/* ==========================================================================
   Freya panels (vote and bug reports): what the panels need that the main site
   (https://freya.ragnarevival.com/, themes/freya) does not have, built only from
   freya.css tokens and its component vocabulary. Loaded after freya.css (and
   account.css / leaderboard.css / _staff.css when a page asks for them).

   1. Shell glue        account menu and drawer Log out forms, current panel item,
                        warning toast, pagination parts, count badges in pills
   2. Forms             label markers, label row, field states, check rows,
                        counter, drop zone and chosen files, upload progress
   3. Content           key/value list, facts row, report text, files grid,
                        priority bars, result card, empty state parts, inline forms
   4. Comment thread    .fy-thread > .fy-comment (--staff, --own, --system)
   5. Dialogs           head / content / foot / wide for modals beyond the
                        main site's confirm dialog
   6. Vote parts        cooldown (.fy-wait), copied home-page parts under their
                        real selectors (.fy-steps/.fy-step, .fy-tip, .fy-glance__*)
   ========================================================================== */

/* 1. Shell glue ------------------------------------------------------------------ */
/* Log out is a POST form in the panels: its button looks exactly like the main site's link. */
.fy-logout-form { display: block; margin: 0; }
button.fy-menu__link {
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
button.fy-drawer__single {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--line);
	background: transparent;
	text-align: left;
	cursor: pointer;
}
button.fy-drawer__single:hover { color: var(--gold-200); }

/* Account button: the same look as the main site, but the accessible name is the visible name + "account menu"
   (the main site's aria-label "Account menu, NAME" fails axe label-content-name-mismatch, WCAG 2.5.3). Under 720 px
   the name is hidden visually only (the main site uses .fy-hide-sm = display none), so it stays in the name. */
@media (max-width: 719.98px) {
	.fy-account-btn__name {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

/* The panel's own item in the main menus (Community > Bug reports / Vote for Freya): marked like the current page. */
.fy-menu__link[aria-current="true"] { background: rgba(140, 87, 248, .18); }
.fy-drawer__links a[aria-current="true"] { background: rgba(255, 255, 255, .06); color: var(--text); }

/* A warning toast (the main site has success, info and error). */
.fy-toast--warning { --toast: var(--amber-400); }

/* Links under an inline alert. */
.fy-alert__actions { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .45rem 0 0; }
.fy-alert > div > p { margin: .25rem 0 0; }
.fy-alert > div > p:first-child { margin-top: 0; }

/* Tabs as links (the main site's .fy-tab is a button; a link tab must not get the default link underline). */
a.fy-tab { text-decoration: none; }
a.fy-tab[aria-current="page"] { color: #fff; background: var(--grad-violet); box-shadow: var(--glow-violet); }

/* Counts inside sub navigation pills and tabs: "Active 12". */
.fy-subnav a .fy-badge, .fy-tab .fy-badge { padding: .08rem .45rem; font-size: .68rem; }
.fy-subnav a[aria-current="page"] .fy-badge, .fy-subnav a.is-active .fy-badge,
.fy-tab[aria-selected="true"] .fy-badge, .fy-tab.is-active .fy-badge { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .16); color: #fff; }

/* Pagination parts printed by fyk_pagination(): Previous / Next with words, a gap, "Page x of y" on phones. */
.fy-pagination .fy-pagination__step { display: inline-flex; align-items: center; gap: .35rem; }
.fy-pagination .fy-pagination__step .fy-i { width: 1em; height: 1em; }
.fy-pagination .fy-pagination__gap { min-width: 24px; padding: 0; border-color: transparent; background: none; }
.fy-pagination .fy-pagination__pos { display: none; border-color: transparent; background: none; color: var(--text-3); }
@media (max-width: 559.98px) {
	.fy-pagination .fy-pagination__num, .fy-pagination .fy-pagination__gap { display: none; }
	.fy-pagination .fy-pagination__pos { display: inline-grid; }
}

/* Narrow phones (under 360 px): with the server chip the main site's header row is 4 px wider than the screen (the
   main site scrolls sideways by 4 px at 320 px); slightly tighter gaps keep the same row inside the screen. */
@media (max-width: 359.98px) {
	.fy-header__inner { gap: var(--sp-2); }
	.fy-brand { margin-right: 0; }
	.fy-header__actions { gap: .35rem; }
	.fy-status { padding: 0 .6rem; }
}

/* The page-head actions sit at the bottom right of the head (freya.css has the flex row). */
.fy-pagehead__actions .fy-btn { box-shadow: var(--shadow-md); }

/* 2. Forms ----------------------------------------------------------------------- */
.fy-label__req { margin-left: .15rem; color: var(--rose-300); }
.fy-label__opt, .fy-label__aside { margin-left: .4rem; color: var(--text-4); font: 700 .78rem/1.3 var(--font-body); letter-spacing: .01em; }
/* Label with a small link or note on the right (account.css has it for its own forms). */
.fy-label-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--sp-3); }
.fy-label-row a { font-size: .85rem; font-weight: 700; }
/* Field states for every form (the same values as account.css .fy-account-form). */
.fy-field.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.fy-field.is-invalid select, .fy-field.is-invalid textarea {
	border-color: var(--rose-400);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-400) 20%, transparent);
}
.fy-field .fy-error-text { display: flex; align-items: flex-start; gap: .4rem; margin: 0; line-height: 1.4; }
.fy-field .fy-error-text .fy-i { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.fy-field .fy-error-text:empty, .fy-field .fy-error-text[hidden] { display: none; }
.fy-field .fy-help { margin: 0; }
.fy-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.fy-form__row { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.fy-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* A checkbox or radio with its text. */
.fy-check {
	display: flex;
	align-items: flex-start;
	gap: .1rem;
	color: var(--text-2);
	font-size: .94rem;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
}
.fy-check input[type="checkbox"], .fy-check input[type="radio"] { flex: none; margin-top: .14rem; }
/* Radio cards (a reward rating, a choice of three): account.css's .fy-account-choice look with any number of columns.
   <div class="fy-choice" role="radiogroup" aria-labelledby="x"><label><input type="radio" name="r" value="1"><span>Average</span></label>...</div> */
.fy-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: .6rem; }
.fy-choice label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .5rem .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	color: var(--text-2);
	font: 600 1rem/1.2 var(--font-display);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-choice label:hover { border-color: var(--line-3); color: var(--text); }
.fy-choice input[type="radio"], .fy-choice input[type="checkbox"] { margin: 0; }
.fy-choice label:has(input:checked) {
	border-color: var(--violet-400);
	background: color-mix(in srgb, var(--violet-500) 18%, transparent);
	color: var(--text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet-400) 40%, transparent);
}
.fy-choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.fy-choice__sub { display: block; color: var(--text-3); font: 700 .78rem/1.3 var(--font-body); }
/* Gold stars (reward tiers): <span class="fy-stars" aria-hidden="true">fyk_icon('star-fill') x n</span> + the tier in words. */
.fy-stars { display: inline-flex; gap: 2px; color: var(--gold-300); vertical-align: -.1em; }
.fy-stars .fy-i { width: 1em; height: 1em; }
/* Toggle chips (filters): <button type="button" class="fy-chip" aria-pressed="true">Open</button>. */
.fy-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text-2);
	font: 600 .88rem/1 var(--font-display);
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-chip:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .12); color: var(--text); }
.fy-chip[aria-pressed="true"], .fy-chip[aria-current="page"] { border-color: var(--violet-400); background: rgba(140, 87, 248, .2); color: #fff; }
@media (pointer: coarse) { .fy-chip { min-height: 40px; } }
/* A state as a coloured dot with a word (never colour alone): Online / Offline / Claimed. */
.fy-state { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--text-3); }
.fy-state::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fy-state--on { color: var(--mint-300); }
.fy-state--busy { color: var(--amber-300); }
.fy-state--bad { color: var(--rose-300); }
.fy-state--off { color: var(--text-4); }

/* Character counter under a text area: "153 / 2,000 characters (at least 200)". */
.fy-counter { margin: 0; color: var(--text-4); font: 700 .8rem/1.3 var(--font-body); text-align: right; font-variant-numeric: tabular-nums; }
.fy-counter.is-short { color: var(--amber-300); }
.fy-counter.is-over { color: var(--rose-300); }

/* Drop zone for screenshots: a label around a visually hidden file input (the input keeps the keyboard focus). */
.fy-drop {
	position: relative;
	display: grid;
	justify-items: center;
	gap: .45rem;
	padding: var(--sp-6) var(--sp-5);
	border: 2px dashed var(--line-3);
	border-radius: var(--r-lg);
	background: var(--surface-sunken);
	color: var(--text-3);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fy-drop:hover, .fy-drop.is-over { border-color: var(--violet-400); background: rgba(140, 87, 248, .08); }
.fy-drop:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.fy-drop__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
	transition: transform var(--t-med) var(--ease-spring);
}
.fy-drop:hover .fy-drop__icon, .fy-drop.is-over .fy-drop__icon { transform: translateY(-2px) scale(1.05); }
.fy-drop__icon .fy-i { width: 24px; height: 24px; }
.fy-drop__text { color: var(--text-2); font-size: .98rem; }
.fy-drop__text strong { color: var(--violet-200); }
.fy-drop__hint { color: var(--text-3); font-size: .84rem; }
.fy-drop__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
	white-space: nowrap;
}
.no-js .fy-drop__input { position: static; width: auto; height: auto; margin: .4rem 0 0; clip: auto; overflow: visible; }
.fy-drop__list { display: grid; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.fy-drop__list:empty { display: none; }
.fy-drop__list li {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0;
	padding: .5rem .75rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .03);
	color: var(--text-2);
	font-size: .88rem;
}
.fy-drop__list .fy-i { flex: none; color: var(--violet-300); }
.fy-drop__name { flex: 1; min-width: 0; overflow: hidden; color: var(--text); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fy-drop__size { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fy-drop__list li.is-bad { border-color: rgba(255, 128, 152, .4); background: rgba(240, 74, 105, .08); }
.fy-drop__list li.is-bad .fy-i, .fy-drop__bad { color: var(--rose-300); font-weight: 800; }

/* Upload progress (native <progress>), with its label row. */
.fy-progress {
	display: block;
	width: 100%;
	height: 10px;
	overflow: hidden;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .08);
	appearance: none;
	-webkit-appearance: none;
}
.fy-progress::-webkit-progress-bar { border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); }
.fy-progress::-webkit-progress-value { border-radius: var(--r-pill); background: var(--grad-violet); transition: width var(--t-med) var(--ease); }
.fy-progress::-moz-progress-bar { border-radius: var(--r-pill); background: var(--grad-violet); }
.fy-progress--gold::-webkit-progress-value { background: var(--grad-gold); }
.fy-progress--gold::-moz-progress-bar { background: var(--grad-gold); }
.fy-progress-label { display: flex; justify-content: space-between; gap: var(--sp-3); margin: .45rem 0 0; color: var(--text-3); font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 3. Content ----------------------------------------------------------------------- */
/* Key / value list (report facts, vote facts): <dl class="fy-kv"><div><dt>Status</dt><dd>...</dd></div></dl>. */
.fy-kv { display: grid; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.fy-kv > div { display: grid; gap: .2rem; min-width: 0; padding: .7rem .95rem; }
.fy-kv > div + div { border-top: 1px solid var(--line); }
.fy-kv dt { color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-kv dd { margin: 0; min-width: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
@media (min-width: 560px) {
	.fy-kv--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fy-kv--cols > div + div { border-top: 0; }
	.fy-kv--cols > div:nth-child(n+3) { border-top: 1px solid var(--line); }
	.fy-kv--cols > div:nth-child(even) { border-left: 1px solid var(--line); }
}
/* A row of small facts with icons (date, character, type). */
.fy-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; color: var(--text-3); font-size: .88rem; font-weight: 700; }
.fy-meta li { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.fy-meta .fy-i { width: 1rem; height: 1rem; color: var(--violet-300); }
.fy-meta strong { color: var(--text-2); }
/* Long text a player wrote: line breaks kept by CSS (no nl2br), long words wrap. */
.fy-desc {
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	color: var(--text-2);
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* Inline form (a delete or claim button in a row). */
.fy-inline-form { display: inline; margin: 0; }
.fy-row-actions { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .4rem; }

/* Screenshots and files of a report. */
.fy-files { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); margin: 0; padding: 0; list-style: none; }
.fy-file {
	display: grid;
	gap: .55rem;
	align-content: start;
	margin: 0;
	padding: .6rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.fy-file__thumb {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	color: var(--text-4);
}
.fy-file__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-med) var(--ease); }
a.fy-file__thumb:hover img { transform: scale(1.04); }
.fy-file__thumb .fy-i { width: 2rem; height: 2rem; }
.fy-file__meta { display: grid; gap: .1rem; margin: 0; min-width: 0; padding: 0 .2rem; }
.fy-file__name { overflow: hidden; color: var(--text); font-size: .88rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fy-file__info { color: var(--text-3); font-size: .8rem; font-weight: 700; }
.fy-file__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0 .2rem .2rem; }

/* Priority: four bars and the word. */
.fy-prio { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-3); font: 800 .78rem/1.2 var(--font-body); letter-spacing: .03em; white-space: nowrap; }
.fy-prio__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.fy-prio__bars i { display: block; width: 3px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.fy-prio__bars i:nth-child(1) { height: 5px; }
.fy-prio__bars i:nth-child(2) { height: 7px; }
.fy-prio__bars i:nth-child(3) { height: 9px; }
.fy-prio__bars i:nth-child(4) { height: 12px; }
.fy-prio__bars i.is-on { background: currentColor; }
.fy-prio--medium, .fy-prio--normal { color: var(--sky-300); }
.fy-prio--high { color: var(--gold-300); }
.fy-prio--critical, .fy-prio--urgent {
	padding: .2rem .55rem;
	border: 1px solid var(--rose-400);
	border-radius: var(--r-pill);
	background: rgba(240, 74, 105, .26);
	color: #fff;
}
.fy-prio--critical .fy-prio__bars i.is-on, .fy-prio--urgent .fy-prio__bars i.is-on { background: var(--rose-300); }

/* Result card of a message page (fyk_result()): the main site's .fy-account-result in a framed card. The six
   .fy-account-result rules are copied unchanged from account.css, so a message page does not need that sheet. */
.fy-account-result { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.fy-account-result > img { width: 104px; height: auto; animation: fy-bob 3.2s var(--ease-in-out) infinite; }
.fy-account-result h1 { margin: var(--sp-2) 0 0; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); }
.fy-account-result p { max-width: 40ch; margin: 0; color: var(--text-2); }
.fy-account-result .fy-alert { width: 100%; margin: var(--sp-2) 0 0; text-align: left; }
.fy-account-result__actions { display: grid; gap: var(--sp-3); width: 100%; margin-top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
	.fy-account-result > img { animation: none; }
}
.fy-account-result h2 { margin: var(--sp-2) 0 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 1.95rem); }
.fy-result { max-width: 34rem; margin: var(--sp-4) auto 0; }
.fy-result .fy-account-result p { max-width: 44ch; }
.fy-result__text { max-width: 44ch; color: var(--text-2); }
.fy-result__text p { margin: 0 0 .6em; }
.fy-result--success { border-color: rgba(82, 221, 156, .32); }
.fy-result--danger { border-color: rgba(255, 128, 152, .36); }
.fy-result--warning { border-color: rgba(255, 182, 86, .36); }
.fy-result__redirect { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .5rem; margin: var(--sp-2) 0 0; color: var(--text-3); font-size: .9rem; font-weight: 700; }
.fy-result__redirect .fy-i { color: var(--gold-300); }
.fy-result__stay { padding: 0; border: 0; background: none; color: var(--link); font-weight: 800; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.fy-result__stay:hover { color: var(--link-hover); }

/* Empty state parts (the main site's .fy-empty). */
.fy-empty__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(140, 87, 248, .16); color: var(--violet-300); }
.fy-empty__icon .fy-i { width: 24px; height: 24px; }
.fy-empty__title { margin: var(--sp-2) 0 0; color: var(--text); font: 600 var(--fs-h3)/var(--lh-snug) var(--font-display); }
.fy-empty__text { max-width: 46ch; color: var(--text-3); }
.fy-empty__text p { margin: 0 0 .5em; }
.fy-empty__actions { justify-content: center; margin-top: var(--sp-2); }
.fy-empty--compact { gap: var(--sp-2); padding: var(--sp-6) var(--sp-4); }
.fy-empty--compact img { width: 72px; }
.fy-empty--compact h2, .fy-empty--compact h3, .fy-empty--compact .fy-empty__title { font-size: var(--fs-lg); }

/* A board row whose main cell has a name and a line under it (woebr.css does the same for its player board):
   <td class="fy-lb-main fy-lb-main--stack"><span class="fy-lb-name">...</span><span class="fy-lb-sub">...</span></td>. */
.fy-lb-main--stack { display: block; min-width: 0; }

/* 4. Comment thread -------------------------------------------------------------- */
.fy-thread { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.fy-thread > li { margin: 0; }
.fy-comment { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: .8rem; align-items: start; }
.fy-comment__avatar {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--grad-violet);
	color: #fff;
	font: 700 1rem/1 var(--font-display);
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.fy-comment__avatar .fy-i { width: 1.15rem; height: 1.15rem; }
.fy-comment__body {
	min-width: 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: 6px var(--r-lg) var(--r-lg) var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-sm), var(--inner-hi);
}
.fy-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0 0 .5rem; }
.fy-comment__author { margin: 0; color: var(--text); font: 600 1rem/1.25 var(--font-display); }
.fy-comment__time { color: var(--text-4); font-size: .8rem; font-weight: 700; }
.fy-comment__tools { display: flex; gap: .35rem; margin-left: auto; }
.fy-comment__text { margin: 0; color: var(--text-2); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Staff answers wear the gold storybook frame. */
.fy-comment--staff .fy-comment__avatar { background: var(--grad-gold); color: #3a2200; box-shadow: var(--glow-gold); }
.fy-comment--staff .fy-comment__body {
	position: relative;
	border-color: rgba(255, 214, 109, .3);
	background: radial-gradient(120% 90% at 0% 0%, rgba(255, 196, 63, .08), transparent 60%), var(--grad-card), var(--surface);
}
.fy-comment--staff .fy-comment__body::before {
	content: "";
	position: absolute;
	inset: 5px;
	border: 1px solid rgba(255, 214, 109, .12);
	border-radius: 3px calc(var(--r-lg) - 4px) calc(var(--r-lg) - 4px) calc(var(--r-lg) - 4px);
	pointer-events: none;
}
.fy-comment--own .fy-comment__body { border-color: rgba(167, 126, 255, .32); background: radial-gradient(120% 90% at 0% 0%, rgba(140, 87, 248, .1), transparent 60%), var(--grad-card), var(--surface); }
/* System lines ("GM Aria claimed this report."): no card, a quiet line with a small tile. */
.fy-comment--system { grid-template-columns: 42px minmax(0, 1fr); align-items: center; }
.fy-comment--system .fy-comment__avatar { width: 32px; height: 32px; margin-inline: auto; border-radius: 11px; background: rgba(140, 87, 248, .16); color: var(--violet-300); box-shadow: none; }
.fy-comment--system .fy-comment__avatar .fy-i { width: 1rem; height: 1rem; }
.fy-comment--system .fy-comment__body { padding: .4rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.fy-comment--system .fy-comment__text { color: var(--text-3); font-size: .9rem; font-weight: 700; }
@media (max-width: 559.98px) {
	.fy-comment { grid-template-columns: 34px minmax(0, 1fr); gap: .6rem; }
	.fy-comment__avatar { width: 34px; height: 34px; font-size: .9rem; }
	.fy-comment__body { padding: var(--sp-3) var(--sp-4); }
	.fy-comment--system { grid-template-columns: 34px minmax(0, 1fr); }
}
/* The reply form under the thread. */
.fy-reply { margin-top: var(--sp-6); }

/* 5. Dialogs ---------------------------------------------------------------------- */
/* Modals beyond the confirm dialog: <dialog class="fy-dialog fy-dialog--panel"> > .fy-dialog__head + .fy-dialog__content + .fy-dialog__foot */
.fy-dialog--panel { width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 900px); }
.fy-dialog--wide { width: min(840px, calc(100vw - 2rem)); }
.fy-dialog__frame { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.fy-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--line); }
.fy-dialog__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.35rem; }
.fy-dialog__title .fy-i { color: var(--gold-300); }
.fy-dialog__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--text-3);
}
.fy-dialog__close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.fy-dialog__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.fy-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6) var(--sp-5); border-top: 1px solid var(--line); }
@media (max-width: 559.98px) {
	.fy-dialog__head, .fy-dialog__content, .fy-dialog__foot { padding-inline: var(--sp-4); }
	.fy-dialog__foot .fy-btn { flex: 1 1 auto; }
}

/* 6. Vote parts --------------------------------------------------------------------- */
/* Cooldown: "Next vote in 11:42:05" with a bar that fills while the wait runs down. */
.fy-wait {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: .2rem .9rem;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-sunken);
}
.fy-wait__tile { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 196, 63, .13); color: var(--gold-300); }
.fy-wait__label { color: var(--text-3); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-wait__time { color: var(--gold-200); font: 600 1.35rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.fy-wait .fy-progress { grid-column: 1 / -1; margin-top: .55rem; }
.fy-wait__next { grid-column: 1 / -1; margin: .35rem 0 0; color: var(--text-3); font-size: .86rem; font-weight: 700; }
.fy-wait--ready { border-color: rgba(82, 221, 156, .32); }
.fy-wait--ready .fy-wait__tile { background: rgba(82, 221, 156, .14); color: var(--mint-300); }
.fy-wait--ready .fy-wait__time { color: var(--mint-300); }

/* Copied from themes/freya/css/pages/main-index.css (home page) under their real selectors: the three steps joined by a
   dotted quest trail, the dashed tip line and the "at a glance" facts strip (without the home hero's overlap). */
.fy-steps {
	position: relative;
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}
.fy-step {
	position: relative;
	margin: 0;
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
}
.fy-step h3 { margin: var(--sp-4) 0 var(--sp-2); }
.fy-step p { color: var(--text-3); }
.fy-step .fy-link-arrow, .fy-step .fy-badge { margin-top: var(--sp-4); }
.fy-step__num {
	position: absolute;
	top: -18px;
	left: var(--sp-6);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--grad-gold);
	color: #3a2200;
	font: 700 1.15rem/1 var(--font-display);
	box-shadow: var(--glow-gold), 0 0 0 5px var(--bg);
}
.fy-step__icon {
	display: grid;
	place-items: center;
	width: 60px;
	height: 60px;
	border-radius: 20px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
}
.fy-step__icon .fy-i { width: 28px; height: 28px; }
.fy-step__icon--gold { background: rgba(255, 196, 63, .14); color: var(--gold-300); }
.fy-step__icon--pink { background: rgba(243, 90, 169, .15); color: var(--petal-300); }
@media (min-width: 860px) {
	.fy-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
	.fy-steps::before {
		content: "";
		position: absolute;
		top: 1px;
		left: 12%;
		right: 12%;
		height: 2px;
		background-image: linear-gradient(90deg, var(--gold-400) 40%, transparent 40%);
		background-size: 14px 2px;
		opacity: .45;
	}
}
.fy-tip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	max-width: 920px;
	margin: var(--sp-8) auto 0;
	padding: var(--sp-4) var(--sp-5);
	border: 1px dashed var(--line-3);
	border-radius: var(--r-lg);
	background: rgba(12, 8, 30, .5);
}
.fy-tip__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 196, 63, .13); color: var(--gold-300); }
.fy-tip p { flex: 1 1 320px; margin: 0; color: var(--text-2); font-size: .94rem; }
.fy-glance__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: var(--r-xl);
	background: var(--line);
	box-shadow: var(--shadow-lg);
}
.fy-glance__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: .8rem;
	align-items: center;
	padding: 1.05rem 1.15rem;
	background: linear-gradient(180deg, rgba(36, 26, 80, .97), rgba(25, 18, 58, .97));
}
.fy-glance__icon {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: rgba(255, 196, 63, .13);
	color: var(--gold-300);
}
.fy-glance__item dt { color: var(--text-3); font: 800 .68rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-glance__item dd { margin: 0; color: var(--text); font: 600 1.02rem/1.25 var(--font-display); }
@media (max-width: 759.98px) {
	.fy-glance__item { column-gap: .65rem; padding: .95rem .9rem; }
	.fy-glance__icon { width: 34px; height: 34px; border-radius: 11px; }
	.fy-glance__icon .fy-i { width: 1.05em; height: 1.05em; }
	.fy-glance__item dd { font-size: .95rem; }
}
@media (min-width: 760px) { .fy-glance__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Reduced motion and print, as freya.css does for its own parts. */
@media (prefers-reduced-motion: reduce) {
	.fy-drop__icon, .fy-file__thumb img { transition: none; }
}
@media (forced-colors: active) {
	.fy-prio__bars i.is-on { background: CanvasText; }
	.fy-progress::-webkit-progress-value { background: Highlight; }
}