/* ==========================================================================
   Freya bug reports: the parts only this panel has, in the main site's style.
   Loaded after freya.css (the live theme), the kit sheets and panel.css (the panel kit) on every page.
   Only the main site's tokens (var(--...)) are used: no colours of its own.

   1. Shared parts     4. Report page          7. Staff pages (admin, transfer)
   2. Report form      5. Ratings and rewards  8. Confirm pages (delete)
   3. Report lists     6. Thread and dialogs   9. Phones and motion
   ========================================================================== */

/* 1. Shared parts ------------------------------------------------------------ */
/* Sections on a page sit apart like the main site's cards. */
.fy-page > .fy-card + .fy-card,
.fy-page > .fy-card + .fy-lb-board,
.fy-page > .fy-card + section,
.fy-page > section + section,
.fy-page > .fy-split + section { margin-top: var(--sp-8); }
.fy-page > .fy-subnav + .fy-card, .fy-page > .fy-subnav + section { margin-top: 0; }

/* A heading inside an alert (the guidelines, the ban notice) reads as the alert's title. */
.fy-alert h3.fy-alert__title { margin: 0 0 .25rem; font-size: 1.02rem; line-height: 1.3; }
.fy-alert ol, .fy-alert ul { margin: .4rem 0 .5rem; padding-left: 1.25rem; }
.fy-alert li { margin: .25rem 0; }
.fy-alert li::marker { color: var(--gold-300); font-weight: 800; }

/* A list with the main site's gold diamonds (notes, tips). */
.bp-notes { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.bp-notes li { position: relative; padding-left: 1.3rem; color: var(--text-2); line-height: 1.5; }
.bp-notes li::before {
	content: "";
	position: absolute;
	left: .2rem;
	top: .55em;
	width: .5rem;
	height: .5rem;
	background: var(--gold-300);
	transform: rotate(45deg);
	border-radius: 1px;
	box-shadow: 0 0 10px rgba(255, 196, 63, .45);
}
.bp-notes strong { color: var(--text); }

/* An input with its button or unit on one row (display name + Save, amount + "points"). */
.bp-inline { display: flex; gap: var(--sp-2); align-items: stretch; }
.bp-inline > input { flex: 1 1 auto; min-width: 0; }
.bp-inline > .fy-btn { flex: none; }
.bp-inline__unit {
	display: inline-flex;
	align-items: center;
	padding: 0 .95rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: rgba(255, 255, 255, .04);
	color: var(--text-3);
	font: 700 .88rem/1 var(--font-body);
}

/* A larger poring for a page's main empty state. */
.fyb-empty--lg img { width: 120px; }

/* Buttons inside board rows keep the button look (the board colours every link violet and bold). */
.fy-lb-table a.fy-btn { color: var(--text); font-weight: 600; }
.fy-lb-table a.fy-btn:hover { color: var(--text); }

/* 2. Report form ------------------------------------------------------------- */
.bp-report-form__head { margin-bottom: var(--sp-4); }
.bp-report-form__sub { max-width: 62ch; margin: .45rem 0 0; color: var(--text-3); font-size: .94rem; }
.bp-guide__tip { display: flex; gap: .45rem; align-items: flex-start; margin: .4rem 0 0; color: var(--text-3); font-size: .9rem; }
.bp-guide__tip .fy-i { flex: none; margin-top: .2rem; color: var(--sky-300); }
.bp-form { margin-top: var(--sp-5); }
.bp-form textarea { min-height: 220px; }
.bp-form .fy-form__actions { padding-top: var(--sp-2); }

/* The rewards dialog shown before sending. */
.bp-tiers { display: grid; gap: .5rem; margin: var(--sp-4) 0 var(--sp-5); padding: 0; list-style: none; }
.bp-tiers__item {
	display: grid;
	grid-template-columns: 4.6rem minmax(0, 1fr) auto;
	align-items: center;
	gap: .7rem;
	padding: .65rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
}
.bp-tiers__item:last-child { border-color: rgba(255, 214, 109, .3); background: radial-gradient(120% 120% at 0% 0%, rgba(255, 196, 63, .09), transparent 60%), var(--surface-sunken); }
.bp-tiers__label { color: var(--text); font-weight: 800; }
.bp-tiers__points { color: var(--gold-200); font: 600 1.05rem/1.2 var(--font-display); white-space: nowrap; }
.bp-send__tips-title { margin: 0 0 var(--sp-3); font-size: 1.05rem; }
.bp-send__progress { margin-top: var(--sp-5); }
.bp-send__error { margin: var(--sp-4) 0 0; }
.bp-send__error p { margin: 0; }

/* 3. Report lists ------------------------------------------------------------ */
/* The player's board: report, priority, date, actions, status. */
.dash-reports__table { --lb-cols: minmax(0, 1fr) 118px 116px 168px 132px; }
.dash-reports__actions .fy-row-actions { justify-content: flex-start; }
.dash-reports .fy-empty { margin-top: var(--sp-2); }

/* 4. Report page ----------------------------------------------------------------- */
.bp-report { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.bp-report__main, .bp-report__aside { display: grid; gap: var(--sp-6); min-width: 0; }
@media (min-width: 1024px) {
	.bp-report { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "main aside" "thread aside"; }
	.bp-report__main { grid-area: main; }
	.bp-report__aside { grid-area: aside; }
	.bp-thread { grid-area: thread; }
}
.bp-card__head { margin-bottom: var(--sp-5); }
.bp-card__eyebrow { margin: 0 0 .4rem; }
.bp-card__title { margin: 0 0 .7rem; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.bp-card__meta { gap: .5rem .9rem; }
.bp-card__label {
	margin: 0 0 .55rem;
	color: var(--text-3);
	font: 800 .72rem/1.3 var(--font-body);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.bp-files .fy-file__thumb { cursor: zoom-in; }

/* The screenshot viewer. */
.bp-viewer__stage { display: grid; place-items: center; padding: var(--sp-4); background: var(--surface-sunken); }
.bp-viewer__stage img { max-width: 100%; max-height: min(70vh, 760px); width: auto; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-md); }
.bp-viewer__foot { justify-content: space-between; }

/* Reporter facts. */
.bp-kv dd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bp-kv__value { min-width: 0; overflow-wrap: anywhere; }
.bp-edit { flex: none; margin: -.35rem -.35rem -.35rem 0; }
.bp-reporter__note, .bp-staff__note {
	display: flex;
	gap: .45rem;
	align-items: flex-start;
	margin: var(--sp-3) 0 0;
	color: var(--text-3);
	font-size: .86rem;
	line-height: 1.45;
}
.bp-reporter__note .fy-i, .bp-staff__note .fy-i { flex: none; margin-top: .15rem; color: var(--sky-300); }

/* A character online or offline: a dot and the word (the main site's server chip colours). */
.bp-presence { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; }
.bp-presence::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-4); }
.bp-presence--online { color: var(--mint-300); }
.bp-presence--online::before { background: var(--mint-400); box-shadow: 0 0 0 3px rgba(82, 221, 156, .18); }
.bp-presence--offline { color: var(--text-3); }

/* Staff tools. */
.bp-staff__group + .bp-staff__group { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.bp-staff__title { margin: 0 0 .5rem; font-size: 1.02rem; }
.bp-staff__group > p { margin: 0 0 .65rem; }
.bp-staff__now { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bp-staff__form { gap: var(--sp-4); }
.bp-staff__fieldset { display: grid; gap: var(--sp-4); min-width: 0; margin: 0; padding: 0; border: 0; }
.bp-staff__fieldset[disabled] { opacity: .55; }

/* 5. Ratings and rewards --------------------------------------------------------- */
/* The rating cards are the kit's .fy-choice; in the narrow aside they stand one under the other. */
.bp-rating { margin: 0; padding: 0; border: 0; min-width: 0; }
.bp-rating > legend { margin-bottom: .5rem; padding: 0; }
.bp-report__aside .bp-rating__opts { grid-template-columns: minmax(0, 1fr); }
.bp-rating__opts label { justify-content: flex-start; text-align: left; }
.bp-rating__text { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .75rem; min-width: 0; }
.bp-rating__text .fy-choice__sub { display: inline-flex; align-items: center; gap: .35rem; color: var(--gold-200); font-size: .82rem; }
.bp-rewards > p { margin: 0 0 .75rem; }
.bp-rewards__form { margin-top: var(--sp-2); }
.bp-rewards__done { display: flex; gap: .5rem; align-items: flex-start; color: var(--mint-300); font-weight: 700; }
.bp-rewards__done .fy-i { flex: none; margin-top: .2rem; }

/* 6. Thread and dialogs ---------------------------------------------------------- */
.bp-thread .fy-card__head { align-items: center; }
.bp-sort { margin: 0; }
.fy-comment--system .fy-comment__body { display: flex; align-items: center; gap: .5rem; }
.fy-comment--system .fy-comment__text { flex: 1; }
.fy-comment--system .fy-comment__time { margin-left: .35rem; font-weight: 700; }
.fy-reply .fy-alert { margin-bottom: 0; }
.fy-dialog--panel form.fy-dialog__frame { display: flex; flex-direction: column; max-height: inherit; margin: 0; }

/* 7. Staff pages (admin, transfer) ------------------------------------------------ */
.admin-profile { display: grid; gap: var(--sp-5); align-items: start; }
@media (min-width: 960px) {
	.admin-profile { grid-template-columns: auto minmax(0, 1fr) 280px; align-items: center; }
}
.admin-profile__who { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.admin-profile__tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--grad-gold);
	color: #3a2200;
	box-shadow: var(--glow-gold);
}
.admin-profile__tile .fy-i { width: 24px; height: 24px; }
.admin-profile__id { min-width: 0; }
.admin-profile__title { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.admin-profile__role { margin: .1rem 0 0; color: var(--gold-200); font: 800 .7rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.admin-profile__name { min-width: 0; padding: .7rem .95rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.admin-profile__summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .9rem; cursor: pointer; list-style: none; }
.admin-profile__summary::-webkit-details-marker { display: none; }
.admin-profile__seen { color: var(--text-2); }
.admin-profile__seen strong { color: var(--text); }
.admin-profile__change { display: inline-flex; align-items: center; gap: .35rem; color: var(--violet-300); font: 600 .9rem/1 var(--font-display); }
.admin-profile__summary:hover .admin-profile__change { color: var(--gold-300); }
.admin-profile__chev { transition: transform var(--t-med) var(--ease); }
.admin-profile__name[open] .admin-profile__chev { transform: rotate(180deg); }
.admin-profile__form { margin-top: var(--sp-4); }
.admin-credits { display: grid; gap: .3rem; }
.admin-credits__title { display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--text-3); font: 800 .72rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.admin-credits__title .fy-i { color: var(--gold-300); }
.admin-credits__value { margin: 0; color: var(--gold-200); font: 600 1.6rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; }
.admin-credits__value small { color: var(--text-3); font: 700 .86rem/1 var(--font-body); }
.admin-credits__actions, .admin-credits__note { margin: .3rem 0 0; }
.admin-credits__note { color: var(--text-3); font-size: .86rem; }
.admin-results { margin-top: var(--sp-6); }
.admin-results .fy-table-wrap { margin-top: var(--sp-2); }
.admin-reports { margin-top: var(--sp-8); }
.admin-bar { align-items: flex-start; }
.admin-tabs { margin: 0; }
.admin-bar__tools { align-items: center; }
.admin-delete .fy-menu { width: min(320px, calc(100vw - 2rem)); }
.admin-reports__head { margin-top: var(--sp-5); }
.admin-table__title a { overflow-wrap: anywhere; }
.admin-when .fy-staff-sub { display: block; }
.admin-confirm { margin-bottom: var(--sp-8); }
.admin-confirm__title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; }
.admin-confirm__title .fy-i { color: var(--rose-300); }
.admin-confirm__text { margin: 0 0 var(--sp-4); }
.admin-confirm__form { gap: var(--sp-4); }
.admin-xfer { margin-bottom: var(--sp-8); }
.admin-xfer__check.is-ok { color: var(--mint-300); font-weight: 700; }
.admin-xfer__check.is-bad { color: var(--rose-300); font-weight: 700; }
.admin-xfer__check:empty, .admin-xfer__left:empty { display: none; }
.admin-xfer__left { color: var(--text-2); }
.admin-xfer__fine { margin: 0; }
.admin-aside__title { margin: 0 0 var(--sp-3); font-size: 1.05rem; }
.admin-xfer__aside .admin-credits__value { font-size: 2rem; }

/* 8. Confirm pages (delete a report or a comment) -------------------------------- */
.bp-ask { border-color: rgba(255, 128, 152, .3); background: linear-gradient(180deg, rgba(240, 74, 105, .06), rgba(240, 74, 105, 0) 180px), var(--grad-card), var(--surface); }
.bp-ask__title { display: flex; align-items: center; gap: .75rem; margin: 0 0 var(--sp-5); font-size: var(--fs-h3); }
.bp-ask__tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: rgba(240, 74, 105, .16);
	color: var(--rose-300);
}
.bp-ask__tile .fy-i { width: 22px; height: 22px; }
.bp-ask__item, .bp-ask__on { margin: 0 0 var(--sp-5); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.bp-ask__name { margin: 0 0 .6rem; color: var(--text); font-weight: 800; overflow-wrap: anywhere; }
.bp-ask__thread { margin: 0 0 var(--sp-5); }
.bp-ask__notes { margin: 0 0 var(--sp-6); }

/* 9. Phones and motion --------------------------------------------------------- */
@media (max-width: 719.98px) {
	.bp-tiers__item { grid-template-columns: minmax(0, 1fr) auto; }
	.bp-tiers__item .fy-stars { grid-column: 1 / -1; }
	.bp-inline { flex-wrap: wrap; }
	.bp-inline > input { flex-basis: 12rem; }
	.bp-inline--unit { flex-wrap: nowrap; }
	.admin-bar { flex-direction: column; }
	.bp-viewer__foot { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.admin-profile__chev { transition: none; }
}
