/*
 * GuildWorks hub and panel styles.
 *
 * ---- Tokens ----
 *
 * Every colour and face below comes from a --gwu-* token defined on the hub
 * wrapper, and every token reads a --gw-* custom property the SITE may set,
 * with a neutral default when it does not. That is the whole theming story:
 * a community sets --gw-* on :root in its own stylesheet (a theme file, the
 * page builder's site CSS, a code snippet) and the hub takes its colours
 * without the plugin ever naming a community or shipping anybody's brand.
 *
 * The defaults are a deliberately plain slate and indigo, so a fresh install
 * looks finished rather than branded by somebody else.
 *
 * Two rules the tokens carry and every rule below respects:
 *   - accent fills take --gwu-on-accent text (white on the defaults);
 *   - warm fills take --gwu-on-warm text (near black), because a light
 *     orange under white text fails contrast outright.
 */

.gw-hub {
	--gwu-void: var(--gw-void, #08090d);
	--gwu-base: var(--gw-base, #0e1016);
	--gwu-surface: var(--gw-surface, #161923);
	--gwu-raised: var(--gw-raised, #1f2330);
	--gwu-line: var(--gw-line, #2c3242);

	--gwu-violet-deep: var(--gw-violet-deep, #22285a);
	--gwu-violet-core: var(--gw-violet-core, #4f5bd5);
	--gwu-violet-bright: var(--gw-violet-bright, #6570e8);
	--gwu-violet-lift: var(--gw-violet-lift, #9aa3ff);
	--gwu-magenta: var(--gw-magenta, #b7a6ff);

	--gwu-orange-deep: var(--gw-orange-deep, #b4540e);
	--gwu-orange-core: var(--gw-orange-core, #e07b1a);
	--gwu-orange-bright: var(--gw-orange-bright, #f29a32);
	--gwu-amber: var(--gw-amber, #f5c26b);

	--gwu-text-hi: var(--gw-text-hi, #eef0f6);
	--gwu-text-mid: var(--gw-text-mid, #b3b8c7);
	--gwu-text-dim: var(--gw-text-dim, #858ba0);

	--gwu-green: var(--gw-green, #6be3b8);
	--gwu-red: var(--gw-red, #f0644a);

	--gwu-on-accent: var(--gw-on-accent, #ffffff);
	--gwu-on-warm: var(--gw-on-warm, #150b1a);

	--gwu-font-display: var(--gw-font-display, inherit);
	--gwu-font-body: var(--gw-font-body, inherit);

	--gwu-radius: 24px;
	--gwu-radius-sm: 14px;
	--gwu-glass: linear-gradient(180deg, color-mix(in srgb, var(--gwu-raised) 80%, transparent), color-mix(in srgb, var(--gwu-surface) 80%, transparent));
	--gwu-edge: color-mix(in srgb, var(--gwu-violet-lift) 16%, transparent);
	--gwu-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 60px -30px rgba(0, 0, 0, 0.75);

	font-family: var(--gwu-font-body);
}

/* ---- Hub and panel components ---- */

.gw-hub {
	--hub-gap: 24px;
	max-width: 880px;
	margin-inline: auto;
	padding-block: 48px;
	color: var(--gwu-text-mid);
}

/* The other kinds of application, offered at the foot of the apply page. */

.gw-apply__other {
	margin-block-start: 48px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--gwu-line);
}

.gw-apply__tracks {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-apply__tracks li {
	margin-block-start: 12px;
}

.gw-apply__tracknote {
	display: block;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

/* A Discord role, shown beside a member on the roster. */

.gw-staff__tag {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 2px 8px;
	border: 1px solid var(--gw-line, #33244a);
	border-radius: 999px;
	font-size: 12px;
	white-space: nowrap;
}

/* A count beside a compliance heading: how many rows, at a glance. */

.gw-staff__count {
	display: inline-block;
	min-width: 22px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--gwu-line);
	color: var(--gwu-text-hi);
	font-size: 13px;
	text-align: center;
	vertical-align: middle;
}

/* Staff panel. Same tokens as the hub: it is a room in the same house. */

.gw-hub__staff {
	margin-inline-start: auto;
	align-self: center;
	padding: 6px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 999px;
	color: var(--gwu-text-mid);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.gw-hub__staff:hover,
.gw-hub__staff:focus-visible {
	border-color: var(--gwu-violet-lift);
	color: var(--gwu-text-hi);
}

.gw-staff {
	margin-block: var(--hub-gap);
}

.gw-staff__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--gwu-line);
}

.gw-staff__badge {
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gw-staff__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.gw-staff__tab {
	padding: 6px 12px;
	border-radius: 4px;
	color: var(--gwu-text-mid);
	font-size: 14px;
	text-decoration: none;
}

.gw-staff__tab:hover,
.gw-staff__tab:focus-visible {
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
}

.gw-staff__tab.is-current {
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font-weight: 600;
}

.gw-staff__screen {
	padding-top: 24px;
}

.gw-staff__title {
	margin: 0 0 16px;
	color: var(--gwu-text-hi);
}

.gw-staff__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin: 0 0 20px;
}

.gw-staff__stats div {
	padding: 14px 16px;
	border: 1px solid var(--gwu-line);
	border-radius: 6px;
	background: var(--gwu-surface);
}

.gw-staff__stats dt {
	margin: 0 0 4px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gw-staff__stats dd {
	margin: 0;
	color: var(--gwu-text-hi);
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.gw-staff__note,
.gw-staff__empty {
	margin: 0 0 8px;
	font-size: 15px;
}

.gw-staff__warn {
	margin: 0 0 8px;
	color: var(--gwu-amber);
	font-size: 15px;
}

/* Staff screens: queue tables, answers, review forms. */

.gw-staff__subtitle {
	margin: 28px 0 12px;
	color: var(--gwu-text-hi);
	font-size: 18px;
}

.gw-staff__muted {
	color: var(--gwu-text-dim);
}

.gw-staff__back {
	color: var(--gwu-text-mid);
	font-size: 14px;
	text-decoration: none;
}

.gw-staff__back:hover,
.gw-staff__back:focus-visible {
	color: var(--gwu-text-hi);
}

.gw-staff__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
}

.gw-staff select,
.gw-staff textarea {
	padding: 8px 10px;
	border: 1px solid var(--gwu-line);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font: inherit;
	font-size: 15px;
}

.gw-staff textarea {
	width: 100%;
	max-width: 52em;
	resize: vertical;
}

.gw-staff__btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--gwu-line);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font: inherit;
	font-size: 14px;
	text-decoration: none;
	cursor: pointer;
}

.gw-staff__btn:hover,
.gw-staff__btn:focus-visible {
	border-color: var(--gwu-violet-lift);
}

/* The decision is the consequential button, so it looks like one. */
.gw-staff__btn--go {
	border-color: var(--gwu-violet-core);
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	font-weight: 600;
}

.gw-staff__btn--go:hover,
.gw-staff__btn--go:focus-visible {
	background: var(--gwu-violet-bright);
	border-color: var(--gwu-violet-bright);
}

.gw-staff__table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
	font-size: 15px;
}

.gw-staff__table th {
	padding: 8px 10px;
	border-bottom: 1px solid var(--gwu-line);
	color: var(--gwu-text-dim);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
}

.gw-staff__table td {
	padding: 12px 10px;
	border-bottom: 1px solid var(--gwu-line);
	vertical-align: top;
}

.gw-staff__table code {
	font-size: 12px;
	color: var(--gwu-text-dim);
}

.gw-staff__answer {
	max-width: 52em;
	margin: 0 0 16px;
}

.gw-staff__label {
	margin: 0 0 6px;
	color: var(--gwu-text-hi);
	font-weight: 600;
}

.gw-staff__answerbody {
	padding: 12px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 6px;
	background: var(--gwu-surface);
	white-space: pre-wrap;
}

.gw-staff__form p {
	margin: 0 0 12px;
}

.gw-staff__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.gw-staff__choices label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Text inputs match the selects and textareas above. */
.gw-staff input[type="text"],
.gw-staff input[type="number"],
.gw-staff input[type="url"],
.gw-staff input[type="email"],
.gw-staff input[type="datetime-local"] {
	padding: 8px 10px;
	border: 1px solid var(--gwu-line);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font: inherit;
	font-size: 15px;
}

.gw-staff input[type="text"] {
	width: 100%;
	max-width: 32em;
}

/* One labelled control, its label above it and its hint below. */
.gw-staff__field {
	display: block;
	max-width: 52em;
	margin: 0 0 16px;
}

.gw-staff__fieldlabel {
	display: block;
	margin: 0 0 6px;
	color: var(--gwu-text-hi);
	font-size: 14px;
	font-weight: 600;
}

.gw-staff__hint {
	display: block;
	margin: 6px 0 0;
	color: var(--gwu-text-dim);
	font-size: 13px;
}

/* A one-button form sitting inside a table cell. */
.gw-staff__inline {
	display: inline-block;
	margin: 0 4px 0 0;
}

.gw-staff__btn--mini {
	padding: 4px 10px;
	font-size: 13px;
}

.gw-staff__link {
	color: var(--gwu-text-hi);
	text-decoration: none;
}

.gw-staff__link:hover,
.gw-staff__link:focus-visible {
	color: var(--gwu-violet-lift);
}

/* An archived question is still readable, just plainly retired. */
.gw-staff__row--off {
	opacity: 0.55;
}

/* A markdown body being edited. Monospace, because alignment carries meaning. */
.gw-staff__code {
	width: 100%;
	max-width: none;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	line-height: 1.6;
	tab-size: 4;
}

/*
 * A rendered document, on the staff screen and in the hub alike. Only the tags
 * Markdown builds can appear in here, so this list is the whole surface.
 *
 * Not prefixed gw-staff, because the member reading a policy sees the same
 * markup as the staff member previewing it. One renderer, one stylesheet: if
 * the two ever diverge, somebody agrees to a document that looked different
 * to the person who wrote it.
 */
.gw-doc {
	max-width: 44em;
	padding: 20px 24px;
	border: 1px solid var(--gwu-line);
	border-radius: 6px;
	background: var(--gwu-surface);
	line-height: 1.7;
}

.gw-doc > :first-child {
	margin-top: 0;
}

.gw-doc > :last-child {
	margin-bottom: 0;
}

.gw-doc h3,
.gw-doc h4,
.gw-doc h5,
.gw-doc h6 {
	margin: 1.6em 0 0.5em;
	color: var(--gwu-text-hi);
	line-height: 1.3;
}

.gw-doc h3 {
	font-size: 20px;
}

.gw-doc h4 {
	font-size: 17px;
}

.gw-doc h5,
.gw-doc h6 {
	font-size: 15px;
}

.gw-doc p,
.gw-doc ul,
.gw-doc ol {
	margin: 0 0 1em;
}

.gw-doc li {
	margin: 0 0 0.35em;
}

.gw-doc a {
	color: var(--gwu-violet-lift);
}

.gw-doc strong {
	color: var(--gwu-text-hi);
}

.gw-doc blockquote {
	margin: 1.2em 0;
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--gwu-violet-lift);
	color: var(--gwu-text-hi);
}

.gw-doc code {
	padding: 2px 5px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.92em;
}

.gw-doc pre {
	overflow-x: auto;
	margin: 1.2em 0;
	padding: 14px 16px;
	border: 1px solid var(--gwu-line);
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.25);
}

.gw-doc pre code {
	padding: 0;
	background: none;
}

.gw-doc hr {
	margin: 1.8em 0;
	border: 0;
	border-top: 1px solid var(--gwu-line);
}

.gw-doc img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* The clearance checklist. One row per gate, ticked or not. */
.gw-gate__list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.gw-gate {
	display: flex;
	gap: 10px;
	align-items: baseline;
	margin: 0 0 10px;
}

.gw-gate__mark {
	flex: 0 0 auto;
	width: 1.2em;
	text-align: center;
	font-weight: 700;
}

.gw-gate.is-done .gw-gate__mark {
	color: var(--gwu-green);
}

.gw-gate.is-todo .gw-gate__mark {
	color: var(--gwu-amber);
}

.gw-gate.is-done .gw-gate__label {
	color: var(--gwu-text-dim);
}

.gw-gate__detail {
	display: block;
	margin: 2px 0 0;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

/* The member-facing list of documents, and the agreement block under one. */
.gw-doc__list {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.gw-doc__item {
	padding: 14px 0;
	border-bottom: 1px solid var(--gwu-line);
}

.gw-doc__item:last-child {
	border-bottom: 0;
}

.gw-doc__needs {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.gw-doc__agree {
	margin: 24px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--gwu-violet-lift);
	border-radius: 6px;
	background: var(--gwu-surface);
}

.gw-doc__agree p {
	margin: 0 0 12px;
}

.gw-doc__agreed {
	margin: 24px 0 0;
	color: var(--gwu-text-dim);
}

/*
 * What a handler said on the way back. Tone is ok, warn or bad, and the key
 * comes from a catalogue rather than the URL, so nobody can put words here.
 */
.gw-staff__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid var(--gwu-line);
	border-left: 3px solid var(--gwu-violet-lift);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font-size: 15px;
}

.gw-staff__notice--warn {
	border-left-color: var(--gwu-amber);
}

.gw-staff__notice--bad {
	border-left-color: var(--gwu-red);
}

.gw-hub__notice {
	margin: 0 0 var(--hub-gap);
	padding: 12px 16px;
	border: 1px solid var(--gwu-line);
	border-left: 3px solid var(--gwu-amber);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font-size: 15px;
}

.gw-hub__title {
	margin: 0 0 8px;
	color: var(--gwu-text-hi);
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.15;
}

.gw-hub__lede {
	max-width: 52ch;
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.55;
}

.gw-hub__lede--muted {
	color: var(--gwu-text-dim);
}

.gw-hub__gate {
	padding: 40px;
	border: 1px solid var(--gwu-line);
	border-radius: 8px;
	background: var(--gwu-surface);
}

.gw-btn {
	display: inline-block;
	padding: 14px 26px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

/* Violet fill takes white text. Orange fill would not clear 4.5:1. */
.gw-btn--discord {
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
}

.gw-btn--discord:hover,
.gw-btn--discord:focus {
	background: var(--gwu-violet-bright);
	color: var(--gwu-on-accent);
}

/*
 * The same thing as a real submit button. .gw-btn is written for links, so the
 * element defaults have to come off before the shared styling lands or the
 * browser's own chrome shows through.
 */
.gw-btn--go {
	border: 0;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	font-family: inherit;
	cursor: pointer;
}

.gw-btn--go:hover,
.gw-btn--go:focus-visible {
	background: var(--gwu-violet-bright);
	color: var(--gwu-on-accent);
}

.gw-hub__card {
	display: flex;
	gap: 20px;
	align-items: center;
	padding: 24px;
	border: 1px solid var(--gwu-line);
	border-radius: 8px;
	background: var(--gwu-surface);
}

.gw-hub__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.gw-hub__identity .gw-hub__title {
	margin-bottom: 4px;
	font-size: 24px;
}

.gw-hub__status {
	margin: 0;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gwu-amber);
}

.gw-hub__status[data-status="removed"],
.gw-hub__status[data-status="inactive"] {
	color: var(--gwu-text-dim);
}

.gw-hub__panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--hub-gap);
	margin-top: var(--hub-gap);
}

.gw-hub__panel {
	padding: 24px;
	border: 1px solid var(--gwu-line);
	border-radius: 8px;
	background: var(--gwu-base);
}

.gw-hub__panel h3 {
	margin: 0 0 10px;
	color: var(--gwu-text-hi);
	font-size: 17px;
}

.gw-hub__panel p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

.gw-hub__signout {
	margin-top: 32px;
	font-size: 14px;
}

@media (max-width: 480px) {
	.gw-hub {
		padding-block: 32px;
	}

	.gw-hub__gate {
		padding: 24px;
	}

	.gw-hub__card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* ---- Application form ---- */

.gw-hub__notice--error {
	border-left-color: var(--gwu-orange-bright);
}

.gw-hub__notice ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.gw-apply__intro {
	margin-bottom: 32px;
}

.gw-apply__form {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.gw-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gw-field__label {
	color: var(--gwu-text-hi);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.gw-field__optional {
	margin-left: 6px;
	color: var(--gwu-text-dim);
	font-size: 13px;
	font-weight: 400;
	text-transform: lowercase;
}

.gw-field__help {
	margin: 0;
	color: var(--gwu-text-dim);
	font-size: 14px;
	line-height: 1.45;
}

.gw-field__help--min {
	margin-top: 2px;
}

.gw-apply input[type="text"],
.gw-apply input[type="url"],
.gw-apply input[type="email"],
.gw-apply input[type="number"],
.gw-apply textarea,
.gw-apply select {
	width: 100%;
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 4px;
	background: var(--gwu-surface);
	color: var(--gwu-text-hi);
	font: inherit;
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	line-height: 1.5;
}

.gw-apply textarea {
	min-height: 140px;
	resize: vertical;
}

.gw-apply input::placeholder,
.gw-apply textarea::placeholder {
	color: var(--gwu-text-dim);
}

.gw-apply input:focus,
.gw-apply textarea:focus,
.gw-apply select:focus {
	border-color: var(--gwu-violet-lift);
	outline: 2px solid var(--gwu-orange-bright);
	outline-offset: 1px;
}

.gw-choices {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gw-choices--scale {
	flex-direction: row;
	gap: 18px;
}

.gw-choice {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--gwu-text-mid);
	font-size: 16px;
	line-height: 1.45;
	cursor: pointer;
}

.gw-choice input {
	margin-top: 3px;
	accent-color: var(--gwu-violet-bright);
	flex: 0 0 auto;
}

.gw-apply__form .gw-btn {
	align-self: flex-start;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
}

/* ---- Polls ---- */

.gw-polls__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gw-polls__item {
	padding: 24px;
	border: 1px solid var(--gwu-line);
	border-radius: 8px;
	background: var(--gwu-surface);
}

.gw-polls__item h3 {
	margin: 0 0 8px;
	color: var(--gwu-text-hi);
	font-size: 19px;
}

.gw-polls__item p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.5;
}

.gw-polls__done {
	color: var(--gwu-text-dim);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.gw-polls__bars {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gw-polls__bars li {
	display: grid;
	grid-template-columns: minmax(8em, 14em) 1fr 3.5em;
	gap: 12px;
	align-items: center;
	font-size: 15px;
}

.gw-polls__bar-label {
	color: var(--gwu-text-hi);
}

/* The bar is one element with a background stripe sized by --pct, so there is
   no inner div and nothing to get out of sync with the number beside it. */
.gw-polls__bar {
	height: 10px;
	border-radius: 5px;
	background:
		linear-gradient(to right, var(--gwu-violet-bright) var(--pct, 0%), transparent var(--pct, 0%)),
		var(--gwu-raised);
}

.gw-polls__bar-pct {
	text-align: right;
	color: var(--gwu-text-mid);
	font-variant-numeric: tabular-nums;
}

.gw-polls__texts {
	margin: 0 0 28px;
	padding-left: 20px;
}

.gw-polls__texts li {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
}

@media (max-width: 560px) {
	.gw-polls__bars li {
		grid-template-columns: 1fr 3.5em;
	}

	.gw-polls__bar-label {
		grid-column: 1 / -1;
	}
}

/* ---- Claim code and threads ---- */

/* Shown once, then never again, so it has to be unmissable and easy to
   transcribe off a screen or a phone photo. */
.gw-code {
	margin: 8px 0 20px;
	padding: 18px 22px;
	border: 1px dashed var(--gwu-amber);
	border-radius: 6px;
	background: var(--gwu-base);
	color: var(--gwu-amber);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: clamp(20px, 5vw, 28px);
	letter-spacing: 0.12em;
	text-align: center;
	word-break: break-all;
	user-select: all;
}

.gw-thread__msg {
	margin-bottom: 16px;
	padding: 14px 18px;
	border: 1px solid var(--gwu-line);
	border-radius: 6px;
	background: var(--gwu-base);
}

.gw-thread__from {
	margin: 0 0 6px;
	color: var(--gwu-text-dim);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gw-thread__msg p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.55;
}

.gw-thread__msg p:last-child {
	margin-bottom: 0;
}

/* ---- Notifications ---- */

.gw-note__list {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.gw-note {
	padding: 14px 0;
	border-bottom: 1px solid var(--gwu-line);
}

.gw-note:last-child {
	border-bottom: 0;
}

.gw-note__head {
	margin: 0 0 4px;
	color: var(--gwu-text-hi);
	font-size: 16px;
	font-weight: 600;
}

.gw-note__head a {
	color: inherit;
}

/* Read is the resting state, so unread is what gets the emphasis. */
.gw-note__new {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.gw-note__body {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.5;
}

.gw-note__when {
	margin: 0;
	color: var(--gwu-text-dim);
	font-size: 13px;
}

.gw-note:not(.is-unread) .gw-note__head {
	color: var(--gwu-text-mid);
	font-weight: 400;
}

.gw-note__locked {
	margin: 0 0 12px;
	padding-left: 20px;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

.gw-note__prefs p {
	margin: 0 0 12px;
}

/* =====================================================================
 * The app shell: rail, main column, and the look every panel screen
 * inherits. Appended after the older rules on purpose, so it wins where
 * they overlap without the older rules having to be rewritten first.
 * ===================================================================== */

/*
 * The panel wants the width of an app, and the page it sits on is usually
 * a narrow reading column. It widens itself to 1296px (or the viewport, less
 * a gutter) and centres on the column it was placed in, so no page template
 * has to change to host it.
 */
.gw-hub--app {
	--gw-app-width: min(1296px, calc(100vw - 48px));
	width: var(--gw-app-width);
	max-width: none;
	margin-inline: calc(50% - var(--gw-app-width) / 2);
	padding-block: 32px 48px;
	box-sizing: border-box;
}

/* Page styles love to underline links; nothing in the app is body copy. */
.gw-hub .gw-app a {
	text-decoration: none;
}

.gw-app {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	color: var(--gwu-text-mid);
}

.gw-app svg.gw-icon {
	flex: none;
}

/* ---- Rail ---- */

.gw-rail {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: min(760px, calc(100vh - 48px));
	padding: 24px 16px;
	border: 1px solid var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
	box-sizing: border-box;
}

.gw-rail__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 8px 24px;
}

.gw-rail__mark {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	object-fit: cover;
}

.gw-rail__mark--text {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid color-mix(in srgb, var(--gwu-violet-lift) 40%, transparent);
	background: linear-gradient(145deg, var(--gwu-violet-deep), var(--gwu-surface));
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.gw-rail__names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gw-rail__site {
	display: -webkit-box;
	overflow: hidden;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.gw-rail__sub,
.gw-micro {
	color: var(--gwu-text-dim);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gw-rail__list {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-rail__link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	color: var(--gwu-text-mid);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.gw-rail__link:hover,
.gw-rail__link:focus-visible {
	background: rgba(255, 255, 255, 0.04);
	color: var(--gwu-text-hi);
}

.gw-rail__link:focus-visible {
	outline: 2px solid var(--gwu-violet-lift);
	outline-offset: 2px;
}

.gw-rail__link.is-current {
	background: linear-gradient(90deg, color-mix(in srgb, var(--gwu-violet-core) 34%, transparent), color-mix(in srgb, var(--gwu-violet-core) 10%, transparent));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gwu-violet-lift) 32%, transparent);
	color: var(--gwu-text-hi);
}

.gw-rail__label {
	flex: 1 1 auto;
	min-width: 0;
}

.gw-rail__badge {
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 11px;
	background: var(--gwu-orange-core);
	box-sizing: border-box;
	color: var(--gwu-on-warm);
	font-family: var(--gwu-font-display);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.gw-rail__foot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: auto;
	padding-top: 16px;
}

.gw-rail__viewer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding: 12px;
	border: 1px solid var(--gwu-line);
	border-radius: 16px;
	background: color-mix(in srgb, var(--gwu-base) 60%, transparent);
}

.gw-rail__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gw-rail__name {
	overflow: hidden;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gw-rail__role {
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/* ---- Avatars ---- */

.gw-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	object-fit: cover;
}

.gw-avatar--initials {
	background: linear-gradient(145deg, var(--gwu-violet-core), var(--gwu-magenta));
	color: var(--gwu-on-accent);
	font-family: var(--gwu-font-display);
	font-size: 12px;
	font-weight: 700;
}

/* ---- Main column ---- */

.gw-app__main {
	min-width: 0;
	margin: 0;
}

.gw-app .gw-staff__screen {
	padding-top: 0;
}

.gw-app__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 8px 0 20px;
}

.gw-eyebrow {
	margin: 0;
	color: var(--gwu-violet-lift);
	font-family: var(--gwu-font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.gw-eyebrow--warm {
	color: var(--gwu-amber);
}

.gw-app__title,
.gw-app .gw-staff__title {
	margin: 6px 0 0;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.gw-app .gw-staff__title {
	margin: 8px 0 24px;
}

/* ---- Dashboard grid ---- */

.gw-dash {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 20px;
	align-items: start;
}

.gw-dash__main,
.gw-dash__side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* ---- Cards ---- */

.gw-card {
	position: relative;
	padding: 20px 22px;
	border: 1px solid var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
	box-sizing: border-box;
	overflow: hidden;
}

.gw-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 30px;
}

.gw-card__title {
	margin: 0;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 18px;
	font-weight: 700;
}

.gw-card__note {
	margin: 8px 0 0;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

.gw-card__empty {
	margin: 12px 0 0;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

.gw-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	color: var(--gwu-orange-bright);
	font-family: var(--gwu-font-display);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.gw-card__head .gw-card__link {
	margin-top: 0;
}

.gw-card__link:hover,
.gw-card__link:focus-visible {
	color: var(--gwu-amber);
}

.gw-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

/* ---- Tiles ----
 *
 * `auto-fit` rather than a fixed four columns, because the row is four tiles
 * or five: support only appears for staff who answer tickets. A hard
 * `repeat(4, ...)` left the fifth tile alone on a second row at full width,
 * which read as a different kind of thing rather than a fifth of the same
 * kind.
 */

.gw-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}

.gw-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 128px;
	padding: 18px 20px;
	border: 1px solid var(--gwu-edge);
	border-radius: 20px;
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
	box-sizing: border-box;
	overflow: hidden;
	color: var(--gwu-text-mid);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

a.gw-tile:hover,
a.gw-tile:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	transform: translateY(-2px);
}

a.gw-tile:focus-visible {
	outline: 2px solid var(--gwu-violet-lift);
	outline-offset: 2px;
}

.gw-tile__label {
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 600;
}

.gw-tile__figure {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: auto;
}

.gw-tile__n {
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.gw-tile__sub {
	color: var(--gwu-text-dim);
	font-size: 13px;
}

/* The one tile that needs somebody. Accent fill, so accent-on text. */
.gw-tile--hot {
	border-color: transparent;
	background: linear-gradient(135deg, var(--gwu-violet-core) 0%, var(--gwu-violet-bright) 55%, var(--gwu-magenta) 130%);
	box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--gwu-violet-bright) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: var(--gwu-on-accent);
}

.gw-tile--hot::before {
	content: "";
	position: absolute;
	top: -30px;
	right: -30px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
}

.gw-tile--hot .gw-tile__n,
.gw-tile--hot .gw-tile__sub {
	color: var(--gwu-on-accent);
}

/* ---- Chart ----
 *
 * The Overview's applications chart: a 14-day Catmull-Rom spline of
 * submissions, membership track against everything else.
 *
 * **`gw-chart`, and `gw-plot` is a different family on purpose.** These two
 * shared the `gw-chart` prefix for one afternoon: `__svg` and `__grid` were
 * each declared twice in this one stylesheet, the later block won, and this
 * chart quietly lost its fixed height and its dashed, non-scaling gridlines.
 * It is stretched (`preserveAspectRatio="none"`), so it needs both; a plot
 * keeps its aspect and sizes from its viewBox, so it needs neither. Two
 * drawings with different needs never share a prefix.
 */

.gw-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin: 0;
	padding: 0;
	color: var(--gwu-text-mid);
	font-size: 13px;
	list-style: none;
}

.gw-legend li {
	display: flex;
	gap: 8px;
	align-items: center;
}

.gw-legend__key {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.gw-legend__key--a {
	background: var(--gwu-violet-lift);
}

.gw-legend__key--b {
	background: var(--gwu-orange-core);
}

.gw-chart__plot {
	margin-top: 16px;
}

.gw-chart__svg {
	display: block;
	width: 100%;
	height: 180px;
	overflow: visible;
}

.gw-chart__grid {
	stroke: var(--gwu-line);
	stroke-dasharray: 2 6;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.gw-chart__stop--a {
	stop-color: var(--gwu-violet-bright);
}

.gw-chart__stop--b {
	stop-color: var(--gwu-orange-core);
}

.gw-chart__line {
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.gw-chart__series--a .gw-chart__line {
	stroke: var(--gwu-violet-lift);
}

.gw-chart__series--b .gw-chart__line {
	stroke: var(--gwu-orange-bright);
}

.gw-chart__dot {
	fill: var(--gwu-base);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.gw-chart__series--a .gw-chart__dot {
	stroke: var(--gwu-magenta);
}

.gw-chart__series--b .gw-chart__dot {
	stroke: var(--gwu-orange-bright);
}

.gw-chart__axis {
	display: grid;
	grid-template-columns: repeat(14, minmax(0, 1fr));
	margin: 10px 0 0;
	padding: 0;
	color: var(--gwu-text-dim);
	font-size: 12px;
	list-style: none;
}

.gw-chart__axis li {
	overflow: visible;
	white-space: nowrap;
}

.gw-chart__axis li:last-child {
	text-align: right;
}

.gw-chart__axis .is-today {
	color: var(--gwu-text-hi);
}

/* ---- Queue rows ---- */

.gw-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.gw-rows__head,
.gw-row {
	display: grid;
	grid-template-columns: minmax(160px, 1.6fr) 1fr 1.2fr 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 0 20px 0 22px;
}

.gw-rows__head {
	color: var(--gwu-text-dim);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gw-row {
	position: relative;
	min-height: 56px;
	border: 1px solid var(--gwu-line);
	border-radius: var(--gwu-radius-sm);
	background: color-mix(in srgb, var(--gwu-raised) 60%, transparent);
	color: var(--gwu-text-mid);
	font-size: 14px;
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gw-row::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 0;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--gwu-violet-lift);
}

.gw-row--warm::before {
	background: var(--gwu-orange-bright);
}

.gw-row:hover,
.gw-row:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 40%, transparent);
	background: color-mix(in srgb, var(--gwu-raised) 85%, transparent);
	color: var(--gwu-text-hi);
}

.gw-row__who {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	color: var(--gwu-text-hi);
}

.gw-row__who strong {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Pills ---- */

.gw-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	box-sizing: border-box;
	font-family: var(--gwu-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.gw-pill--warm {
	background: color-mix(in srgb, var(--gwu-orange-bright) 14%, transparent);
	color: var(--gwu-amber);
}

.gw-pill--cool {
	background: color-mix(in srgb, var(--gwu-violet-lift) 14%, transparent);
	color: var(--gwu-violet-lift);
}

.gw-pill--good {
	background: color-mix(in srgb, var(--gwu-green) 12%, transparent);
	color: var(--gwu-green);
}

/* A warm fill, so dark text: see the token notes at the top. */
.gw-pill--solid {
	background: var(--gwu-orange-core);
	color: var(--gwu-on-warm);
}

.gw-pill__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

/* ---- Wave card ---- */

.gw-wave::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--gwu-orange-core) 28%, transparent), transparent 70%);
	pointer-events: none;
}

.gw-wave__name {
	margin: 10px 0 18px;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 24px;
	font-weight: 800;
}

.gw-wave .gw-micro {
	margin: 0;
}

.gw-wave__count {
	margin: 4px 0 0;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.gw-wave__count small {
	color: var(--gwu-text-dim);
	font-size: 22px;
	font-weight: 700;
}

.gw-meter {
	height: 8px;
	margin-top: 18px;
	border-radius: 4px;
	background: var(--gwu-raised);
	overflow: hidden;
}

.gw-meter span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--gwu-orange-deep), var(--gwu-orange-bright));
}

.gw-wave__dates {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 8px 0 0;
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/* ---- Key/value list ---- */

.gw-kv {
	margin: 4px 0 0;
}

.gw-kv div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	border-bottom: 1px solid var(--gwu-line);
	font-size: 14px;
}

.gw-kv div:last-child {
	border-bottom: 0;
}

.gw-kv dt {
	color: var(--gwu-text-mid);
}

.gw-kv dd {
	margin: 0;
	color: var(--gwu-text-hi);
	text-align: right;
}

/* ---- Activity feed ---- */

.gw-feed {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.gw-feed__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 20px;
}

.gw-feed__item::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gwu-violet-lift);
}

.gw-feed__item.is-warm::before {
	background: var(--gwu-orange-bright);
}

.gw-feed__text {
	color: var(--gwu-text-hi);
	font-size: 14px;
}

.gw-feed__meta {
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/* =====================================================================
 * Every existing panel screen, in the new look. Class names are the ones
 * the screens already print, so no screen had to change to get this.
 * ===================================================================== */

.gw-app .gw-staff__subtitle {
	margin: 32px 0 12px;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 20px;
	font-weight: 700;
}

.gw-app .gw-staff__note {
	color: var(--gwu-text-mid);
}

.gw-app .gw-staff__table {
	border-collapse: separate;
	border-spacing: 0 8px;
}

.gw-app .gw-staff__table th {
	padding: 4px 16px;
	border-bottom: 0;
	color: var(--gwu-text-dim);
	font-size: 11px;
	letter-spacing: 0.12em;
}

.gw-app .gw-staff__table td {
	padding: 14px 16px;
	border-top: 1px solid var(--gwu-line);
	border-bottom: 1px solid var(--gwu-line);
	background: color-mix(in srgb, var(--gwu-raised) 60%, transparent);
	vertical-align: middle;
}

.gw-app .gw-staff__table td:first-child {
	border-left: 1px solid var(--gwu-line);
	border-radius: var(--gwu-radius-sm) 0 0 var(--gwu-radius-sm);
	box-shadow: inset 3px 0 0 var(--gwu-violet-lift);
}

.gw-app .gw-staff__table td:last-child {
	border-right: 1px solid var(--gwu-line);
	border-radius: 0 var(--gwu-radius-sm) var(--gwu-radius-sm) 0;
}

.gw-app .gw-staff__table td:only-child {
	border-radius: var(--gwu-radius-sm);
}

/*
 * Theme table styles put a border on every cell. A row here is one card,
 * so the lines between its cells come off; the card edges above stay.
 */
.gw-app .gw-staff__table th {
	border: 0;
	background: none;
}

.gw-app .gw-staff__table td:not(:first-child) {
	border-left: 0;
}

.gw-app .gw-staff__table td:not(:last-child) {
	border-right: 0;
}

.gw-app .gw-staff__table tr:hover > td {
	background: color-mix(in srgb, var(--gwu-raised) 85%, transparent);
}

/* Themes stretch selects to the full column; a filter bar wants them side by side. */
.gw-app select {
	width: auto;
	max-width: 100%;
}

.gw-app .gw-staff__filters,
.gw-app .gw-staff__filters form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.gw-app .gw-staff__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 700;
}

.gw-app .gw-staff__btn--mini {
	min-height: 32px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 13px;
}

.gw-app .gw-staff__btn--go {
	border-color: transparent;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--gwu-violet-bright) 80%, transparent);
}

.gw-app .gw-staff__btn--go:hover,
.gw-app .gw-staff__btn--go:focus-visible {
	background: var(--gwu-violet-bright);
}

.gw-app select,
.gw-app textarea,
.gw-app input[type="text"],
.gw-app input[type="number"],
.gw-app input[type="url"],
.gw-app input[type="email"],
.gw-app input[type="search"],
.gw-app input[type="datetime-local"] {
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-surface) 85%, transparent);
	box-sizing: border-box;
	color: var(--gwu-text-hi);
}

.gw-app select:focus,
.gw-app textarea:focus,
.gw-app input:focus {
	border-color: var(--gwu-violet-lift);
	outline: 2px solid color-mix(in srgb, var(--gwu-violet-lift) 40%, transparent);
	outline-offset: 1px;
}

.gw-app .gw-staff__form,
.gw-app .gw-staff__answerbody,
.gw-app .gw-doc {
	border-radius: var(--gwu-radius-sm);
}

.gw-app .gw-staff__form:not(.gw-staff__inline) {
	padding: 20px 22px;
	border: 1px solid var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
}

.gw-app .gw-staff__notice {
	border-radius: var(--gwu-radius-sm);
	border-left-width: 3px;
	background: var(--gwu-glass);
}

.gw-app .gw-staff__count {
	background: var(--gwu-orange-core);
	color: var(--gwu-on-warm);
	font-family: var(--gwu-font-display);
	font-weight: 700;
}

/*
 * The same badge as a link: the number of actions on file beside a name in
 * the Members list, which opens that member's record. Its colour has to be
 * said again, because a theme's own rule for an anchor is otherwise more
 * specific than the badge the anchor is wearing.
 */

.gw-app a.gw-staff__count {
	color: var(--gwu-on-warm);
	text-decoration: none;
}

.gw-app a.gw-staff__count:hover,
.gw-app a.gw-staff__count:focus-visible {
	color: var(--gwu-on-warm);
	text-decoration: underline;
}

.gw-app .gw-staff__filters {
	padding: 6px;
	border: 1px solid var(--gwu-line);
	border-radius: 16px;
	background: color-mix(in srgb, var(--gwu-base) 60%, transparent);
}

.gw-app .gw-staff__warn {
	margin-top: 20px;
}

/* ---- Narrower screens ---- */

@media (max-width: 1180px) {
	.gw-dash {
		grid-template-columns: minmax(0, 1fr);
	}

	.gw-dash__side {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}

	.gw-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.gw-app {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The rail becomes a strip across the top that scrolls sideways. */
	.gw-rail {
		position: static;
		min-height: 0;
		padding: 12px;
	}

	.gw-rail__brand {
		padding: 0 4px 10px;
	}

	.gw-rail__list {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.gw-rail__list li {
		flex: none;
	}

	.gw-rail__foot {
		flex-direction: row;
		flex-wrap: wrap;
		padding-top: 8px;
	}

	.gw-rail__viewer {
		display: none;
	}

	.gw-app__title {
		font-size: 32px;
	}

	.gw-rows__head {
		display: none;
	}

	.gw-row {
		grid-template-columns: minmax(0, 1fr) auto;
		padding: 12px 16px 12px 20px;
	}

	.gw-row > span:nth-child(2),
	.gw-row > span:nth-child(3),
	.gw-row > span:nth-child(4) {
		display: none;
	}

	.gw-chart__axis li:nth-child(4n + 2),
	.gw-chart__axis li:nth-child(4n + 3) {
		visibility: hidden;
	}
}

@media (max-width: 520px) {
	.gw-tiles {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gw-tile,
	.gw-rail__link,
	.gw-row {
		transition: none;
	}

	a.gw-tile:hover {
		transform: none;
	}
}

/* =====================================================================
 * The members hub, in the same shell.
 * ===================================================================== */

.gw-app__head .gw-pill {
	height: 32px;
	padding: 0 14px;
	border-radius: 16px;
}

.gw-pill--member {
	background: color-mix(in srgb, var(--gwu-magenta) 16%, transparent);
	color: var(--gwu-magenta);
}

/* A warm fill takes dark text; the button is the warm version of gw-btn. */
.gw-hub .gw-btn--warm {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	background: var(--gwu-orange-bright);
	box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--gwu-orange-bright) 80%, transparent);
	color: var(--gwu-on-warm);
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.gw-hub .gw-btn--warm:hover,
.gw-hub .gw-btn--warm:focus-visible {
	background: var(--gwu-amber);
	color: var(--gwu-on-warm);
}

.gw-app .gw-btn--go {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 700;
}

/* ---- Hero: getting on the server ---- */

.gw-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 26px 28px;
	border-radius: var(--gwu-radius);
	background: linear-gradient(125deg, var(--gwu-violet-deep) 0%, var(--gwu-violet-core) 58%, var(--gwu-violet-bright) 100%);
	box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--gwu-violet-bright) 65%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.2);
	color: var(--gwu-on-accent);
	overflow: hidden;
}

.gw-hero::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -80px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--gwu-orange-bright) 35%, transparent), transparent 65%);
	pointer-events: none;
}

.gw-hero::after {
	content: "";
	position: absolute;
	right: 60px;
	bottom: -140px;
	width: 260px;
	height: 260px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	pointer-events: none;
}

.gw-hero__top {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px 24px;
}

.gw-hero__title {
	margin: 8px 0 0;
	color: var(--gwu-on-accent);
	font-family: var(--gwu-font-display);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.gw-hero__lede {
	max-width: 52ch;
	margin: 8px 0 0;
	color: color-mix(in srgb, var(--gwu-on-accent) 86%, transparent);
	font-size: 15px;
	line-height: 1.5;
}

.gw-hero__gates {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-gate-chip {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--gwu-radius-sm);
	background: rgba(12, 7, 16, 0.32);
}

.gw-gate-chip__mark {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--gwu-on-accent);
	color: var(--gwu-violet-core);
}

.gw-gate-chip__mark svg {
	stroke-width: 2.5;
}

.gw-gate-chip__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gw-gate-chip__label {
	color: var(--gwu-on-accent);
	font-family: var(--gwu-font-display);
	font-size: 14px;
	font-weight: 700;
}

.gw-gate-chip__sub {
	color: color-mix(in srgb, var(--gwu-on-accent) 80%, transparent);
	font-size: 12px;
	line-height: 1.4;
}

.gw-gate-chip--soon,
.gw-gate-chip--block {
	border-color: color-mix(in srgb, var(--gwu-amber) 55%, transparent);
	background: rgba(12, 7, 16, 0.5);
}

.gw-gate-chip--soon .gw-gate-chip__mark,
.gw-gate-chip--block .gw-gate-chip__mark {
	background: var(--gwu-orange-bright);
	color: var(--gwu-on-warm);
}

.gw-gate-chip--soon .gw-gate-chip__sub,
.gw-gate-chip--block .gw-gate-chip__sub {
	color: var(--gwu-amber);
}

/* ---- Cards on the member side ---- */

.gw-grid2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.gw-grid2 > .gw-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gw-card--glow::after {
	content: "";
	position: absolute;
	bottom: -80px;
	left: -60px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--gwu-violet-core) 35%, transparent), transparent 70%);
	pointer-events: none;
}

.gw-card--glow > * {
	position: relative;
	z-index: 1;
}

.gw-card__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 0;
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/* ---- Servers card: status, then the way in for a cleared member ---- */

.gw-servers {
	grid-column: 1 / -1;
}

.gw-server__connect {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 8px 0 4px 44px;
}

.gw-server__f8 {
	color: var(--gwu-text-dim);
	font-size: 12px;
}

.gw-server__f8 code {
	padding: 1px 6px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--gwu-violet-lift) 12%, transparent);
	color: var(--gwu-text-hi);
	font-size: 12px;
	user-select: all;
}

.gw-staff__code {
	overflow-x: auto;
	padding: 12px 14px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.35);
	font-size: 13px;
	line-height: 1.5;
	white-space: pre;
	user-select: all;
}

@media (max-width: 640px) {
	.gw-server__connect {
		margin-left: 0;
	}
}

.gw-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.gw-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: var(--gwu-radius-sm);
	background: color-mix(in srgb, var(--gwu-base) 45%, transparent);
	color: var(--gwu-text-mid);
	text-decoration: none;
}

a.gw-item:hover,
a.gw-item:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 40%, transparent);
	color: var(--gwu-text-hi);
}

.gw-item__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--gwu-text-mid);
}

.gw-item__icon--warm {
	background: color-mix(in srgb, var(--gwu-orange-bright) 14%, transparent);
	color: var(--gwu-orange-bright);
}

.gw-item__icon--cool {
	background: color-mix(in srgb, var(--gwu-violet-lift) 14%, transparent);
	color: var(--gwu-violet-lift);
}

.gw-item__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.gw-item__title {
	color: var(--gwu-text-hi);
	font-size: 14px;
	font-weight: 600;
}

.gw-item__sub {
	color: var(--gwu-text-dim);
	font-size: 12px;
	line-height: 1.4;
}

.gw-item__state {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 6px;
	color: var(--gwu-text-mid);
	font-size: 13px;
}

.gw-item__action {
	flex: none;
	margin-top: 0;
}

.gw-item__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gwu-line);
}

.gw-item.is-new .gw-item__dot {
	background: var(--gwu-orange-bright);
}

.gw-item:not(.is-new) .gw-item__title {
	color: var(--gwu-text-mid);
	font-weight: 500;
}

.gw-feature__title {
	margin: 8px 0 0;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 22px;
	font-weight: 800;
}

.gw-feature__assure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 8px;
	color: var(--gwu-text-mid);
	font-size: 13px;
}

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

.gw-profile {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 0;
	text-align: center;
}

.gw-profile::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 84px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--gwu-violet-core) 50%, transparent), color-mix(in srgb, var(--gwu-orange-core) 35%, transparent));
}

.gw-profile__ring {
	position: relative;
	margin-top: 40px;
	padding: 3px;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--gwu-orange-bright), var(--gwu-violet-lift));
	line-height: 0;
}

.gw-profile__ring .gw-avatar {
	border: 3px solid var(--gwu-surface);
	font-size: 26px;
}

.gw-profile__name {
	margin: 14px 0 0;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 22px;
	font-weight: 800;
}

.gw-profile__handle {
	margin: 2px 0 0;
	color: var(--gwu-text-dim);
	font-size: 14px;
}

.gw-profile__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
}

.gw-profile .gw-kv {
	width: 100%;
	margin-top: 14px;
	text-align: left;
}

/* ---- Dates ---- */

.gw-dates {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.gw-date {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gw-date__cal {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 52px;
	border: 1px solid color-mix(in srgb, var(--gwu-orange-bright) 30%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-orange-bright) 12%, transparent);
}

.gw-date__mon {
	color: var(--gwu-amber);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gw-date__day {
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
}

/*
 * The member sections that still render their own markup: documents,
 * notifications and feedback. Their panels become cards, their titles take
 * the app's title size, and nothing in those modules had to change.
 */
.gw-member .gw-hub__title {
	margin: 8px 0 20px;
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.gw-member .gw-hub__panels {
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin-top: 0;
	margin-bottom: 20px;
}

.gw-member .gw-hub__panel {
	padding: 22px 24px;
	border: 1px solid var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
}

.gw-member .gw-hub__panel h3 {
	font-family: var(--gwu-font-display);
	font-size: 18px;
	font-weight: 700;
}

.gw-member .gw-hub__notice {
	border-radius: var(--gwu-radius-sm);
	background: var(--gwu-glass);
}

.gw-member .gw-doc {
	max-width: none;
	padding: 28px 32px;
	border-color: var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
}

.gw-member .gw-doc__agree {
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
}

.gw-member .gw-btn {
	border-radius: 12px;
}

.gw-member .gw-doc__item a,
.gw-member .gw-note__head a {
	color: var(--gwu-text-hi);
}

.gw-member .gw-doc__needs {
	background: var(--gwu-orange-core);
	color: var(--gwu-on-warm);
}

.gw-member .gw-note__new {
	background: var(--gwu-orange-core);
	color: var(--gwu-on-warm);
}

@media (max-width: 1180px) {
	.gw-grid2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 860px) {
	.gw-hero {
		padding: 22px 20px;
	}

	.gw-hero__title {
		font-size: 23px;
	}

	.gw-member .gw-hub__title {
		font-size: 32px;
	}
}

/*
 * Theme button styles (an outline and a hover colour of their own) reach
 * every <button> on the page. Inside the app a button is ours, so the
 * plugin's look is restated with enough weight to win.
 */
.gw-hub .gw-app .gw-btn,
.gw-hub .gw-app button.gw-staff__btn {
	border: 1px solid transparent;
	box-shadow: none;
	font-family: var(--gwu-font-display);
	text-transform: none;
	cursor: pointer;
}

.gw-hub .gw-app .gw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-color: var(--gwu-line);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.05);
	color: var(--gwu-text-hi);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.gw-hub .gw-app .gw-btn:hover,
.gw-hub .gw-app .gw-btn:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	background: rgba(255, 255, 255, 0.08);
	color: var(--gwu-text-hi);
}

.gw-hub .gw-app .gw-btn--go,
.gw-hub .gw-app button.gw-staff__btn--go {
	border-color: transparent;
	background: var(--gwu-violet-core);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--gwu-violet-bright) 80%, transparent);
	color: var(--gwu-on-accent);
}

.gw-hub .gw-app .gw-btn--go:hover,
.gw-hub .gw-app .gw-btn--go:focus-visible,
.gw-hub .gw-app button.gw-staff__btn--go:hover,
.gw-hub .gw-app button.gw-staff__btn--go:focus-visible {
	border-color: transparent;
	background: var(--gwu-violet-bright);
	color: var(--gwu-on-accent);
}

.gw-hub .gw-app .gw-btn--warm {
	border-color: transparent;
	background: var(--gwu-orange-bright);
	color: var(--gwu-on-warm);
}

.gw-hub .gw-app .gw-btn--warm:hover,
.gw-hub .gw-app .gw-btn--warm:focus-visible {
	background: var(--gwu-amber);
	color: var(--gwu-on-warm);
}

.gw-hub .gw-app button.gw-staff__btn:not(.gw-staff__btn--go) {
	border-color: var(--gwu-line);
	background: rgba(255, 255, 255, 0.05);
	color: var(--gwu-text-hi);
}

.gw-hub .gw-app button.gw-staff__btn:not(.gw-staff__btn--go):hover,
.gw-hub .gw-app button.gw-staff__btn:not(.gw-staff__btn--go):focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	background: rgba(255, 255, 255, 0.08);
	color: var(--gwu-text-hi);
}

/* A second subject inside one card, such as the channel under the name. */
.gw-card__sub {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--gwu-line);
	color: var(--gwu-text-hi);
	font-family: var(--gwu-font-display);
	font-size: 15px;
	font-weight: 700;
}

/* A value staff may see, but should not see by accident. No script: the
   whole thing is details/summary, so it works with the keyboard and with a
   screen reader and needs nothing loaded. */
.gw-reveal {
	display: inline-block;
}

.gw-reveal__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px;
	border: 1px solid var(--gwu-line);
	border-radius: 999px;
	color: var(--gwu-text-dim);
	font-size: 12px;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.gw-reveal__toggle::-webkit-details-marker {
	display: none;
}

.gw-reveal__toggle:hover,
.gw-reveal__toggle:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	color: var(--gwu-text-hi);
}

.gw-reveal__hide {
	display: none;
}

.gw-reveal[open] .gw-reveal__show {
	display: none;
}

.gw-reveal[open] .gw-reveal__hide {
	display: inline;
}

.gw-reveal__value {
	display: block;
	margin-top: 6px;
	color: var(--gwu-text-hi);
}

/* A tick list of Discord roles: the name to read, the id to check against. */
.gw-roles {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 4px;
	max-height: 320px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--gwu-line);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
}

.gw-roles__role {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.gw-roles__name {
	color: var(--gwu-text-hi);
}

.gw-roles__id {
	margin-left: auto;
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/* A notice that went right, so it does not read in the error colour. */
.gw-hub__notice--ok {
	border-color: color-mix(in srgb, var(--gwu-good, #4ade80) 45%, transparent);
}

/* Withdrawing sits under its own explanation, away from the main action. */
.gw-apply__withdraw {
	margin-top: 12px;
}

/* The small print under a form: still readable, plainly secondary. */
.gw-card__note--quiet {
	color: var(--gwu-text-mute, var(--gwu-text-dim));
	font-size: 13px;
}

/* A button for the thing somebody probably does not want to do. */
.gw-hub .gw-btn--quiet {
	border-color: var(--gwu-line);
	background: transparent;
	color: var(--gwu-text-dim);
}

.gw-hub .gw-btn--quiet:hover,
.gw-hub .gw-btn--quiet:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	background: rgba(255, 255, 255, 0.06);
	color: var(--gwu-text-hi);
}

/* ---- Tickets ---- */

/*
 * A thread, both sides of it. The member's own messages and staff's are
 * distinguished by a left edge rather than by alignment: a chat-bubble layout
 * reads as instant messaging, and this is a queue somebody answers in hours.
 */
.gw-thread {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gw-thread__item {
	margin-bottom: 14px;
	padding: 12px 16px;
	border: 1px solid var(--gwu-line);
	border-left-width: 3px;
	border-radius: var(--gwu-radius-sm, 6px);
	background: var(--gwu-base);
}

.gw-thread__item:last-child {
	margin-bottom: 0;
}

.gw-thread__item--mine {
	border-left-color: var(--gwu-violet-lift);
}

.gw-thread__item--staff {
	border-left-color: var(--gwu-orange-core);
}

/*
 * A staff-only note has to be unmistakable on a screen somebody is reading
 * fast, because the cost of mistaking one for a reply is writing about a
 * member as though they cannot see it. Dashed, tinted, and labelled.
 */
.gw-thread__item--note {
	border-style: dashed;
	border-left-style: solid;
	border-left-color: var(--gwu-amber);
	background: color-mix(in srgb, var(--gwu-amber) 7%, var(--gwu-base));
}

.gw-thread__who {
	margin: 0 0 6px;
	color: var(--gwu-text-dim);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gw-thread__when {
	margin-left: 6px;
	color: var(--gwu-text-dim);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.gw-thread__body p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.55;
}

.gw-thread__body p:last-child {
	margin-bottom: 0;
}

/* Staff eyes only, on the note that is. */
.gw-pill--warn {
	background: color-mix(in srgb, var(--gwu-amber) 14%, transparent);
	color: var(--gwu-amber);
}

/* A field the form came back about. */
.gw-field--bad {
	border-color: var(--gwu-red);
}

.gw-card__note--bad {
	display: block;
	color: var(--gwu-red);
	font-size: 13px;
}

/* One intake field's worth of controls on the category editor. */
.gw-staff__fieldrow {
	margin-bottom: 10px;
	padding: 10px 12px;
	border: 1px solid var(--gwu-line);
	border-radius: var(--gwu-radius-sm, 6px);
	background: var(--gwu-base);
}

.gw-staff__fieldrow .gw-staff__choices {
	margin: 0 0 6px;
}

.gw-staff__fieldrow .gw-staff__choices:last-child {
	margin-bottom: 0;
}

.gw-staff__fieldrow textarea {
	min-height: 52px;
}

/* ---- Numbers, charts and the window picker ---- */

/*
 * Tabular figures ONLY in columns of numbers, where they have to line up.
 * A large standalone value uses the font's proportional figures: equal-width
 * digits make a number like 121 look loose at display sizes.
 */
.gw-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.gw-panelblock {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--gwu-line);
}

.gw-panelblock__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
}

/* One filter row, above everything it scopes. */
.gw-windows {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
}

.gw-windows__pick {
	padding: 5px 11px;
	border: 1px solid var(--gwu-line);
	border-radius: 999px;
	color: var(--gwu-text-dim);
	font-size: 13px;
	text-decoration: none;
}

.gw-windows__pick:hover,
.gw-windows__pick:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	color: var(--gwu-text-hi);
}

.gw-windows__pick.is-current {
	border-color: var(--gwu-violet-bright);
	background: color-mix(in srgb, var(--gwu-violet-bright) 16%, transparent);
	color: var(--gwu-text-hi);
}

/*
 * A row of stat tiles, which is the right form for a headline number.
 *
 * **`gw-stat`, not `gw-tile`.** The dashboard's own `.gw-tile` is a
 * different object: a tall glass card with a 40px figure and a hover lift,
 * built to be clicked through to a screen. These are small read-only
 * readouts. They shared the `gw-tile` prefix for one afternoon, and because
 * neither rule reset what the other set, the two rows swapped halves of
 * their appearance: the glass cards lost their fill and shadow and kept a
 * 128px minimum height, and these readouts inherited a flex column with a
 * 16px gap they were never drawn for. Same lesson as the chart prefixes,
 * written up under "Plots" below.
 */
.gw-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 18px 0;
}

.gw-stat {
	padding: 14px 16px;
	border: 1px solid var(--gwu-line);
	border-radius: var(--gwu-radius-sm, 14px);
	background: var(--gwu-base);
}

.gw-stat__label {
	margin: 0 0 6px;
	color: var(--gwu-text-dim);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.gw-stat__value {
	margin: 0;
	color: var(--gwu-text-hi);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.gw-stat__delta {
	margin: 6px 0 0;
	color: var(--gwu-text-dim);
	font-size: 12px;
}

/*
 * Direction is coloured only where up and down genuinely mean better and
 * worse. The value itself never takes the colour.
 */
.gw-stat__delta--up {
	color: var(--gwu-green);
}

.gw-stat__delta--down {
	color: var(--gwu-amber);
}

/*
 * ---- Plots ----
 *
 * `Chart::columns()` and its table twin. The one chart family in the panel,
 * and named `gw-plot` rather than `gw-chart` for a reason worth keeping.
 *
 * There used to be a second chart here, the applications area chart, on the
 * `gw-chart` prefix. The two shared that prefix for one afternoon: `__svg`
 * and `__grid` ended up declared twice in this one stylesheet, the later
 * block won, and the applications chart quietly lost its fixed height and
 * its dashed, non-scaling gridlines. An empty fortnight then rendered as a
 * tall box with three heavy stretched lines in it. It looked broken because
 * it was wearing another chart's clothes.
 *
 * That chart is gone (see "Chart, removed" further up), but the prefix stays
 * distinct: the next chart added here gets its own family rather than
 * borrowing this one, because two drawings with different needs cannot share
 * a namespace safely. Same story as `gw-stat` against `gw-tile`, just below.
 */
.gw-plot {
	margin: 18px 0 8px;
}

.gw-plot__caption {
	margin-bottom: 8px;
	color: var(--gwu-text-dim);
	font-size: 13px;
}

.gw-plot__svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * One hue for the whole series. A day count is magnitude, not identity, so
 * the colour carries nothing and the height carries everything. This step
 * is the one that passes the lightness band, the chroma floor and 3:1
 * against the panel surface.
 */
.gw-plot__bar {
	fill: var(--gwu-violet-bright);
}

/* A hover target over an empty day, so a gap can be read rather than guessed. */
.gw-plot__void {
	fill: transparent;
}

/* Hairline, solid. A dashed grid reads as a threshold when it is just a grid. */
.gw-plot__grid {
	stroke: var(--gwu-line);
	stroke-width: 1;
}

.gw-plot__tick,
.gw-plot__day {
	fill: var(--gwu-text-dim);
	font-size: 9px;
	font-variant-numeric: tabular-nums;
}

/*
 * The Discord button, inside the app shell.
 *
 * `.gw-hub .gw-app .gw-btn` resets every button in the hub and the panel to
 * the quiet pill and hands the fill back only to `--go` and `--warm`. There
 * was no `--discord` in that set, because until now no Discord button had
 * ever appeared inside the shell: the only one on the site is on the apply
 * page, which is outside it. Without this the invite rendered as a grey
 * outline and read as a secondary link.
 */
.gw-hub .gw-app .gw-btn--discord {
	border-color: transparent;
	background: var(--gwu-violet-core);
	color: var(--gwu-on-accent);
}

.gw-hub .gw-app .gw-btn--discord:hover,
.gw-hub .gw-app .gw-btn--discord:focus-visible {
	border-color: transparent;
	background: var(--gwu-violet-bright);
	color: var(--gwu-on-accent);
}

/*
 * The one in the sidebar fills its card rather than sitting in it half-width.
 * `box-sizing` is not optional here: the app button carries 18px of side
 * padding and a border, and without it `width: 100%` puts 38 pixels of button
 * outside the card it is sitting in.
 */
.gw-hub .gw-app .gw-hub__invite {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

/* ---- Getting set up: the one card on the member home that asks ---- */

.gw-hub .gw-setup__count {
	flex: none;
	color: var(--gwu-text-dim);
	font-size: 12px;
	white-space: nowrap;
}

.gw-hub .gw-setup__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

/*
 * The row is a gw-item and inherits everything but the wrapping. It has to
 * wrap, because this is the only item row in the hub carrying two controls,
 * and the main column it sits in is about 460px wide on a laptop: without
 * this the controls hold their width, the text column collapses to one word
 * per line, and the buttons hang off the card.
 */
.gw-hub .gw-setup__step {
	flex-wrap: wrap;
	row-gap: 10px;
}

/*
 * Ten rems, not fourteen. The basis has to leave room for the icon and the
 * gap inside a 296px row, or the text wraps to the second line and leaves
 * the icon sitting alone on the first.
 */
.gw-hub .gw-setup__step .gw-item__text {
	flex: 1 1 10rem;
}

/*
 * The mark carries the state, and the border carries it again, because a
 * colour on its own is not a signal everybody can read.
 */
.gw-hub .gw-setup__mark svg {
	stroke-width: 2.5;
}

.gw-hub .gw-setup__step--done,
.gw-hub .gw-setup__step--skipped {
	border-color: color-mix(in srgb, var(--gwu-green) 28%, transparent);
}

.gw-hub .gw-setup__step--done .gw-setup__mark,
.gw-hub .gw-setup__step--skipped .gw-setup__mark {
	background: color-mix(in srgb, var(--gwu-green) 16%, transparent);
	color: var(--gwu-green);
}

.gw-hub .gw-setup__step--skipped {
	opacity: 0.72;
}

.gw-hub .gw-setup__step--todo {
	border-color: color-mix(in srgb, var(--gwu-amber) 42%, transparent);
}

.gw-hub .gw-setup__step--todo .gw-setup__mark {
	background: color-mix(in srgb, var(--gwu-amber) 18%, transparent);
	color: var(--gwu-amber);
}

.gw-hub .gw-setup__tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gwu-violet-lift) 16%, transparent);
	color: var(--gwu-text-dim);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	vertical-align: middle;
}

/*
 * Each control is its own form, so this is a flex container of forms rather
 * than of buttons. Without the inline rule under it they stack, which is the
 * same shrink-wrap trap the staff forms hit.
 */
.gw-hub .gw-setup__do {
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 14px;
	margin-left: auto;
}

.gw-hub .gw-hub__form--inline {
	display: inline-flex;
	margin: 0;
}

/* The card link carries a top margin for its usual place under a list. */
.gw-hub .gw-setup__do .gw-card__link {
	margin-top: 0;
	white-space: nowrap;
}

/*
 * Small, bordered and quiet. These sit beside a link rather than under a
 * form, and nothing on this card is urgent enough to be filled orange.
 */
.gw-hub .gw-setup__btn {
	padding: 5px 12px;
	border: 1px solid var(--gwu-line);
	border-radius: 999px;
	background: transparent;
	color: var(--gwu-text-dim);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.gw-hub .gw-setup__btn:hover,
.gw-hub .gw-setup__btn:focus-visible {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	color: var(--gwu-text-hi);
}

@media (max-width: 640px) {
	/*
	 * The controls take their own line rather than being squeezed beside
	 * a label that has wrapped to three. Indented to the text column, so
	 * they still read as belonging to the step above them.
	 */
	.gw-hub .gw-setup__do {
		flex: 1 1 100%;
		justify-content: flex-start;
		margin-left: 48px;
	}
}

/* Text never wears the series colour. */
.gw-plot__value {
	fill: var(--gwu-text-hi);
	font-size: 10px;
	font-weight: 600;
}

.gw-plot__empty {
	margin: 16px 0;
	padding: 18px;
	border: 1px dashed var(--gwu-line);
	border-radius: var(--gwu-radius-sm, 14px);
	color: var(--gwu-text-dim);
	font-size: 14px;
}

/* The table twin. Collapsed, because it is the backup, not the point. */
.gw-plot__data {
	margin-bottom: 18px;
}

.gw-plot__data summary {
	color: var(--gwu-text-dim);
	cursor: pointer;
	font-size: 13px;
}

.gw-plot__data summary:hover {
	color: var(--gwu-text-hi);
}

.gw-staff__rowend {
	white-space: nowrap;
	text-align: right;
}

/* =====================================================================
 * Forms, one system for every form in the hub and the panel.
 * ===================================================================== */

/*
 * **The bug under the complaint: a label that shrink-wraps.**
 *
 * `Panel::field()` puts the control inside its own label, which is right for
 * clicking the words to focus the box. The theme sets `label` to
 * `display: inline-block`, so the label sizes itself to its contents, and
 * every `width: 100%` in this file then resolved against a box that was only
 * as wide as the control's own default. The result was a form of ragged
 * little inputs: a text box at its default twenty characters, a textarea at
 * its default twenty columns, and a select as wide as its longest option.
 *
 * So the label is forced back to a block here. Everything below is the
 * styling that was never going to land while that was true.
 */

/*
 * The class is repeated to raise specificity rather than for effect. The
 * theme rule being undone here sits at two classes and loads after this
 * file, so two classes would lose the tie on order alone.
 */

.gw-hub .gw-staff__field.gw-staff__field,
.gw-hub .gw-staff__field.gw-staff__field > label {
	display: block;
	width: 100%;
}

.gw-hub .gw-staff__field {
	max-width: 100%;
	margin: 0 0 22px;
}

.gw-hub .gw-staff__fieldlabel {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.35;
}

.gw-hub .gw-staff__hint {
	margin: 8px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
}

/* ---- The controls ---- */

/*
 * Every control fills its field, and the field carries the maximum width.
 * The exceptions are the ones where a full-width box would be a lie about
 * what goes in it: a day count is never eight hundred pixels of number.
 */

.gw-hub .gw-staff__field.gw-staff__field select,
.gw-hub .gw-staff__field.gw-staff__field textarea,
.gw-hub .gw-staff__field.gw-staff__field input[type="text"],
.gw-hub .gw-staff__field.gw-staff__field input[type="search"],
.gw-hub .gw-staff__field.gw-staff__field input[type="url"],
.gw-hub .gw-staff__field.gw-staff__field input[type="email"],
.gw-hub .gw-staff__field.gw-staff__field input[type="number"],
.gw-hub .gw-staff__field.gw-staff__field input[type="password"],
.gw-hub .gw-staff__field.gw-staff__field input[type="date"],
.gw-hub .gw-staff__field.gw-staff__field input[type="datetime-local"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* 16px, because anything smaller makes iOS zoom the page on focus. */
	font-size: 16px;
}

.gw-hub .gw-staff__field.gw-staff__field input[type="number"] {
	max-width: 10rem;
}

.gw-hub .gw-staff__field.gw-staff__field input[type="date"],
.gw-hub .gw-staff__field.gw-staff__field input[type="datetime-local"] {
	max-width: 20rem;
}

.gw-app select,
.gw-app textarea,
.gw-app input[type="text"],
.gw-app input[type="number"],
.gw-app input[type="url"],
.gw-app input[type="email"],
.gw-app input[type="password"],
.gw-app input[type="search"],
.gw-app input[type="date"],
.gw-app input[type="datetime-local"] {
	min-height: 46px;
	padding: 11px 15px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-void) 55%, var(--gwu-surface));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
	color: var(--gwu-text-hi);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.gw-app select:hover,
.gw-app textarea:hover,
.gw-app input:not([type="checkbox"]):not([type="radio"]):hover {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 45%, var(--gwu-line));
}

.gw-app select:focus,
.gw-app textarea:focus,
.gw-app input:focus {
	border-color: var(--gwu-violet-lift);
	background: var(--gwu-surface);
	outline: 2px solid color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	outline-offset: 1px;
}

.gw-app ::placeholder {
	color: var(--gwu-text-dim);
	opacity: 1;
}

/*
 * The select draws its own arrow. A native one is painted by the operating
 * system in the system colours, which on a dark card is either invisible or
 * a bright white wedge that belongs to no part of this design.
 */

.gw-app select:not([multiple]) {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	background-image: linear-gradient(45deg, transparent 50%, var(--gwu-text-mid) 50%), linear-gradient(135deg, var(--gwu-text-mid) 50%, transparent 50%);
	background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	/* The arrow rides on top of the field fill, so that is restated here. */
	background-color: color-mix(in srgb, var(--gwu-void) 55%, var(--gwu-surface));
}

.gw-app select:not([multiple]):focus {
	background-color: var(--gwu-surface);
}

.gw-app textarea {
	min-height: 120px;
	padding: 13px 15px;
	resize: vertical;
}

.gw-app .gw-staff__code {
	min-height: 260px;
	font-size: 14px;
	line-height: 1.6;
}

/* ---- Tick boxes ---- */

/*
 * A checkbox and its words are one target rather than a 13px square with a
 * sentence beside it. The row is the control: it has a border, it lights up
 * under the pointer, and it reads as chosen when it is.
 */

.gw-hub .gw-staff__choices {
	gap: 10px;
	margin: 0 0 18px;
}

.gw-app .gw-staff__choices label {
	display: inline-flex;
	flex: 1 1 12rem;
	align-items: flex-start;
	gap: 11px;
	min-height: 46px;
	padding: 11px 16px 11px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-void) 35%, transparent);
	color: var(--gwu-text-mid);
	line-height: 1.45;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gw-app .gw-staff__choices input[type="checkbox"],
.gw-app .gw-staff__choices input[type="radio"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--gwu-violet-bright);
	cursor: pointer;
}

.gw-app .gw-staff__choices label:hover {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 50%, var(--gwu-line));
	color: var(--gwu-text-hi);
}

.gw-app .gw-staff__choices label:focus-within {
	border-color: var(--gwu-violet-lift);
	outline: 2px solid color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	outline-offset: 1px;
}

/*
 * Ticked reads as ticked at a glance. :has() is the only way to say this
 * without a wrapper class the screens would all have to start printing, and
 * a browser without it simply shows the plain row.
 */

.gw-app .gw-staff__choices label:has(input:checked) {
	border-color: color-mix(in srgb, var(--gwu-violet-core) 70%, transparent);
	background: color-mix(in srgb, var(--gwu-violet-core) 16%, transparent);
	color: var(--gwu-text-hi);
}

/*
 * The sentence under a tick box is its own paragraph in the markup, so
 * nothing ties it to the box above except being next to it. Tied here
 * instead, as an indented note, rather than floating loose in the form.
 */

.gw-hub .gw-staff__choices + .gw-staff__hint {
	display: block;
	margin: -8px 0 20px;
	padding: 0 0 0 15px;
	border-left: 2px solid var(--gwu-line);
}

/* ---- The card, and the row that ends it ---- */

.gw-app .gw-staff__form:not(.gw-staff__inline) {
	/*
	 * The card carries the measure rather than each control carrying its
	 * own maximum. Capping the controls instead left every form sitting in
	 * the left two thirds of a wide card, which is the same complaint about
	 * small boxes wearing a different hat.
	 */
	max-width: 54rem;
	padding: 26px 28px;
	border: 1px solid var(--gwu-edge);
	border-radius: var(--gwu-radius);
	background: var(--gwu-glass);
	box-shadow: var(--gwu-shadow);
}

.gw-app .gw-staff__form:not(.gw-staff__inline) > p:last-child {
	margin-bottom: 0;
}

/*
 * The buttons at the foot of a form are an action row, not another
 * paragraph. The rule is written against "a last paragraph holding a
 * button" so no screen has to print a class for it.
 */

.gw-app .gw-staff__form:not(.gw-staff__inline) > p:last-child:has(button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	padding: 22px 0 0;
	border-top: 1px solid var(--gwu-line);
}

/* ---- One field's worth of controls on the intake editor ---- */

.gw-app .gw-staff__fieldrow {
	margin-bottom: 14px;
	padding: 16px 18px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--gwu-void) 45%, transparent);
}

.gw-app .gw-staff__fieldrow textarea {
	min-height: 76px;
}

/* ---- The filter bar ---- */

.gw-app .gw-staff__filters {
	gap: 10px;
	align-items: center;
	padding: 10px;
	border-radius: 18px;
}

.gw-app .gw-staff__filters input[type="search"] {
	flex: 1 1 18rem;
	min-width: 0;
}

.gw-app .gw-staff__filters select {
	flex: 0 1 14rem;
}

/* ---- Narrow screens ---- */

@media (max-width: 782px) {
	.gw-app .gw-staff__form:not(.gw-staff__inline) {
		padding: 20px 16px;
		border-radius: 18px;
	}

	/*
	 * A tick box takes a row of its own rather than sitting in a line of
	 * three, because three of them wrapped at 390px is a staircase.
	 *
	 * Done by widening the basis and not by turning the container into a
	 * column: in a column the basis is a HEIGHT, which made every tick box
	 * twelve rems tall.
	 */
	.gw-app .gw-staff__choices label {
		flex: 1 1 100%;
	}

	.gw-hub .gw-staff__field.gw-staff__field input[type="number"] {
		max-width: 8rem;
	}

	.gw-hub .gw-staff__field.gw-staff__field input[type="date"],
	.gw-hub .gw-staff__field.gw-staff__field input[type="datetime-local"] {
		max-width: 100%;
	}

	.gw-app .gw-staff__filters > * {
		flex: 1 1 100%;
	}

	/* A full-width button is easier to hit than a 90px one. */
	.gw-app .gw-staff__form:not(.gw-staff__inline) > p:last-child:has(button) .gw-staff__btn {
		flex: 1 1 100%;
	}
}

/* ---- The member-facing apply form, matched to the panel ---- */

/*
 * Same product, so the same corners and the same focus ring. The 16px font
 * and the full-width controls were already right here; it was only ever the
 * 4px radius that made it read as a different thing.
 */

.gw-hub .gw-apply input[type="text"],
.gw-hub .gw-apply input[type="url"],
.gw-hub .gw-apply input[type="email"],
.gw-hub .gw-apply input[type="number"],
.gw-hub .gw-apply textarea,
.gw-hub .gw-apply select {
	min-height: 46px;
	padding: 11px 15px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-void) 55%, var(--gwu-surface));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.gw-hub .gw-apply input:focus,
.gw-hub .gw-apply textarea:focus,
.gw-hub .gw-apply select:focus {
	background: var(--gwu-surface);
	outline: 2px solid color-mix(in srgb, var(--gwu-violet-lift) 45%, transparent);
	outline-offset: 1px;
}

.gw-hub .gw-apply .gw-choice {
	gap: 11px;
	padding: 11px 16px 11px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-void) 35%, transparent);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gw-hub .gw-apply .gw-choice:hover {
	border-color: color-mix(in srgb, var(--gwu-violet-lift) 50%, var(--gwu-line));
	color: var(--gwu-text-hi);
}

.gw-hub .gw-apply .gw-choice:has(input:checked) {
	border-color: color-mix(in srgb, var(--gwu-violet-core) 70%, transparent);
	background: color-mix(in srgb, var(--gwu-violet-core) 16%, transparent);
	color: var(--gwu-text-hi);
}

.gw-hub .gw-apply .gw-choice input {
	width: 18px;
	height: 18px;
	margin-top: 1px;
}

/* ---- Staging banner: on the hub and the panel, never on a live site ---- */

/*
 * Amber rather than red. Nothing is broken, and a red bar at the top of every
 * page teaches people to ignore red bars. It sits above the app shell on both
 * sides and spans the whole width, including over the rail, because the point
 * is that it cannot be mistaken for part of a screen.
 */
.gw-env {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 16px;
	padding: 10px 16px;
	border: 1px solid color-mix(in srgb, var(--gwu-amber) 45%, transparent);
	border-radius: var(--gwu-radius-sm, 12px);
	background: color-mix(in srgb, var(--gwu-amber) 12%, transparent);
	font-size: 13px;
	line-height: 1.5;
}

.gw-env__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	color: var(--gwu-amber);
	font-family: var(--gwu-font-display, inherit);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gw-env__note {
	color: var(--gwu-text-mid);
}

/* ---- The outbox: what a staging install refused to send ---- */

.gw-outbox {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.gw-outbox__row {
	padding: 12px 14px;
	border: 1px solid var(--gwu-line);
	border-radius: 12px;
	background: color-mix(in srgb, var(--gwu-void) 30%, transparent);
}

.gw-outbox__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	font-size: 12px;
}

/*
 * The message body wraps rather than scrolling sideways. A DM is prose with
 * newlines in it, and the whole reason this exists is to read it.
 */
.gw-outbox__body {
	margin: 10px 0 0;
	overflow-x: visible;
	white-space: pre-wrap;
	word-break: break-word;
}

/* ---- The Discord door: the invite as a button, never as a link ---- */

.gw-invite__door {
	margin: 4px 0 0;
}

/*
 * The locked state. It stays the shape and size of the real button rather
 * than becoming a line of text, because the point is that the member can see
 * the thing they are waiting for and when it arrives.
 */
.gw-hub .gw-app .gw-btn[disabled],
.gw-hub .gw-btn[disabled] {
	border-color: var(--gwu-line);
	background: color-mix(in srgb, var(--gwu-void) 45%, transparent);
	color: var(--gwu-text-mute);
	cursor: not-allowed;
	gap: 8px;
}

.gw-hub .gw-btn[disabled] svg {
	opacity: 0.8;
}

/* ---- Your invite link: the member's own way to bring somebody in ---- */

/*
 * Full width, like the servers card. A link and a sentence about it do not
 * fit a half column, and the first attempt at this left a tall card beside
 * an empty one.
 */
.gw-hub .gw-invite {
	grid-column: 1 / -1;
}

/*
 * The link sits under its row and indented past the icon, which is exactly
 * what `gw-server__connect` does with the connect button. Same offset, so
 * the two cards line up rather than nearly lining up.
 */
.gw-hub .gw-invite__share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin: 8px 0 4px 44px;
}

/*
 * The same treatment the servers card gives its F8 command: a tinted code
 * chip that selects in one go. There is no JavaScript in this plugin, so
 * selection is the copy button.
 */
.gw-hub .gw-invite__url {
	padding: 4px 10px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--gwu-violet-lift) 12%, transparent);
	color: var(--gwu-text-hi);
	font-size: 13px;
	word-break: break-all;
	user-select: all;
}

.gw-hub .gw-invite__hint {
	color: var(--gwu-text-dim);
	font-size: 12px;
}

.gw-hub .gw-invite__reset {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 14px 0 0 44px;
}

.gw-hub .gw-invite__warn {
	color: var(--gwu-text-mute);
	font-size: 12px;
	line-height: 1.5;
}

@media (max-width: 640px) {
	.gw-hub .gw-invite__share,
	.gw-hub .gw-invite__reset {
		margin-left: 0;
	}
}