:root {
	--bg: #14161a;
	--panel: #1c1f25;
	--border: #2c313a;
	--text: #e6e8ec;
	--muted: #8b9199;
	--accent: #b8873a;
	--accent-hover: #d09c48;
	--danger: #d4574f;
	--ok: #5aa469;
	--discord: #5865f2;
	--discord-hover: #6b77f5;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	display: flex;
	flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ---------------------------------------------------------------- header --- */

header {
	border-bottom: 1px solid var(--border);
	background: #171a1f;
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Wider than the article column below it on purpose. Six tabs, two role tabs for
   staff and two buttons do not fit in the 68rem the content uses, and a header that
   spans more than the text under it is a great deal less odd than one that wraps. */
.bar {
	max-width: 78rem;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	gap: .25rem;
	min-height: 3.5rem;
	flex-wrap: wrap;
}

/* The name is long, so no uppercase and only a hint of tracking - otherwise it
   eats the whole bar and pushes the tabs onto a second line. */
.brand {
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--text);
	margin-right: 1rem;
	white-space: nowrap;
}

.brand:hover { color: var(--accent); text-decoration: none; }

.tab {
	color: var(--muted);
	/* Tightened when the bar grew to six tabs plus two buttons: at .85rem the row
	   overflowed by about fifteen pixels and the auth links dropped to a second line. */
	padding: .5rem .65rem;
	border-radius: 4px;
	white-space: nowrap;
}

.tab:hover { color: var(--text); background: rgba(255, 255, 255, .04); text-decoration: none; }

/* The tab matching the current page. Set by nav.js from the pathname, so the
   markup stays identical on every page. */
.tab.active { color: var(--accent); background: rgba(184, 135, 58, .1); }

/* The right-hand button group. margin-left:auto lives on the first of them, so the
   two stay together and the tabs keep the left side. */
.download {
	margin-left: auto;
	background: var(--accent);
	color: #17191d;
	padding: .45rem .9rem;
	border-radius: 4px;
	font-weight: 600;
	font-size: .875rem;
	white-space: nowrap;
}

.download:hover { background: var(--accent-hover); color: #17191d; text-decoration: none; }

.discord {
	margin-left: .4rem;
	background: var(--discord);
	color: #fff;
	padding: .45rem .9rem;
	border-radius: 4px;
	font-weight: 600;
	font-size: .875rem;
	white-space: nowrap;
}

.discord:hover { background: var(--discord-hover); color: #fff; text-decoration: none; }

/* Neither address is final yet, so both render as <span>: it cannot be clicked,
   focused or opened in a new tab, which is honest about there being nowhere to go.
   Swap the element to <a href="..."> when the link exists - the styling is on the
   class and does not change. */
span.download, span.discord { cursor: default; }

/* Sits right of the Discord button; filled by nav.js once the session is known. */
.auth {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-left: .75rem;
	font-size: .875rem;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ main --- */

main {
	flex: 1;
	width: 100%;
	max-width: 44rem;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

/* Auth screens are narrow forms; wide prose measure would look wrong there. */
main.narrow { max-width: 26rem; }

/* Формы входа умещаются в narrow, а кабинет — нет: почта вида
   nikita.slepchenkov7@gmail.com переносилась посреди адреса. */
main.medium { max-width: 34rem; }

/* Admin and moderation tables do not fit the reading measure. */
main.wide { max-width: 62rem; }

h1 { font-size: 1.4rem; margin: 0 0 1.5rem; }
h2 { font-size: 1.1rem; margin: 2.25rem 0 .75rem; }

.hero {
	border: 1px solid var(--border);
	border-radius: 8px;
	background:
		radial-gradient(120% 140% at 15% 0%, rgba(184, 135, 58, .16), transparent 60%),
		var(--panel);
	padding: 2.5rem 2rem;
	margin-bottom: 2.5rem;
}

.hero h1 {
	font-size: 2rem;
	letter-spacing: .02em;
	margin-bottom: .75rem;
}

.hero p { color: var(--muted); margin: 0; max-width: 34rem; }

.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--muted); }
.prose li { margin-bottom: .35rem; }

.stub {
	border-left: 2px solid var(--accent);
	padding-left: 1rem;
	color: var(--muted);
	font-size: .9rem;
}

footer {
	border-top: 1px solid var(--border);
	padding: 1.5rem;
	text-align: center;
	color: var(--muted);
	font-size: .825rem;
}

/* ----------------------------------------------------------- components --- */

.panel {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 1.5rem;
}

label { display: block; margin-bottom: 1rem; }
label span { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .85rem; }

input, textarea, select {
	width: 100%;
	padding: .6rem .7rem;
	background: #101216;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
	font: inherit;
}

textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
select { cursor: pointer; }

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }

button {
	width: 100%;
	padding: .65rem;
	background: var(--accent);
	border: 0;
	border-radius: 4px;
	color: #17191d;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

button:hover:not(:disabled) { background: var(--accent-hover); }
button:disabled { opacity: .55; cursor: default; }

.hint { margin-top: 1rem; color: var(--muted); font-size: .875rem; text-align: center; }
.note { color: var(--muted); font-size: .8rem; margin-top: -.6rem; margin-bottom: 1rem; }

.message { margin-top: 1rem; padding: .6rem .75rem; border-radius: 4px; font-size: .875rem; display: none; }
.message.show { display: block; }
.message.error { background: rgba(212, 87, 79, .12); border: 1px solid var(--danger); color: #eda19b; }
.message.ok    { background: rgba(90, 164, 105, .12); border: 1px solid var(--ok);     color: #9ed3a9; }

dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------- identity block --- */

/* The value sits in a span, never an input: not-editable is then structural
   rather than a readonly attribute, and password managers leave it alone. */
.secret {
	display: block;
	flex: 1;
	min-width: 0;
	padding: .6rem .7rem;
	background: #101216;
	border: 1px solid var(--border);
	border-radius: 4px;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: .9rem;
	letter-spacing: .04em;
	overflow-wrap: anywhere;
	user-select: all;
}

.secret-row { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; }

/* The base button rule is width:100%, which would make the eye toggle span the
   whole panel. */
.icon-btn, .btn-inline {
	width: auto;
	flex: 0 0 auto;
	padding: .55rem .8rem;
	background: transparent;
	border: 1px solid var(--border);
	color: var(--text);
	font-weight: 500;
}

.icon-btn:hover:not(:disabled), .btn-inline:hover:not(:disabled) {
	background: rgba(255, 255, 255, .05);
	border-color: var(--accent);
}

.btn-danger { background: transparent; border: 1px solid var(--danger); color: #eda19b; width: auto; padding: .5rem .8rem; }
.btn-danger:hover:not(:disabled) { background: rgba(212, 87, 79, .12); }

.warn {
	margin-top: .75rem;
	padding: .6rem .75rem;
	border-left: 2px solid var(--danger);
	background: rgba(212, 87, 79, .07);
	color: #eda19b;
	font-size: .85rem;
}

/* ---------------------------------------------------------------- badges --- */

.badge {
	display: inline-block;
	padding: .15rem .5rem;
	border-radius: 3px;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.badge-pending  { background: rgba(184, 135, 58, .15); color: var(--accent); }
.badge-approved { background: rgba(90, 164, 105, .15); color: #9ed3a9; }
.badge-rejected { background: rgba(212, 87, 79, .15);  color: #eda19b; }
.badge-muted    { background: rgba(139, 145, 153, .15); color: var(--muted); }

/* ---------------------------------------------------------------- tables --- */

.table-wrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.table th {
	text-align: left;
	padding: .5rem .6rem;
	border-bottom: 1px solid var(--border);
	color: var(--muted);
	font-weight: 500;
	white-space: nowrap;
}
.table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .mono { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; color: var(--muted); }
.table select { width: auto; padding: .3rem .4rem; font-size: .8rem; }

.section { margin-bottom: 2.5rem; }
.section h2 { margin-top: 0; }
.empty { color: var(--muted); font-size: .9rem; }

.counter { text-align: right; color: var(--muted); font-size: .75rem; margin-top: -.75rem; margin-bottom: 1rem; }

/* display:contents so injected tabs sit in .bar's flex flow exactly like the
   static ones. */
.role-tabs { display: contents; }

@media (max-width: 40rem) {
	.bar { padding: .5rem 1rem; gap: .15rem; }
	.brand { margin-right: .5rem; }
	.tab { padding: .45rem .6rem; }
	.download { margin-left: auto; }
	.discord { margin-left: .3rem; }
	.auth { margin-left: 0; width: 100%; padding-bottom: .5rem; }
	main { padding: 2rem 1rem; }
	main.wide { max-width: none; }
	.hero { padding: 1.75rem 1.25rem; }
	.hero h1 { font-size: 1.5rem; }
	.secret-row > * { flex: 1 1 100%; }
}

/* Revealed identity inside a table cell. Selectable in one click, because the
   whole point of revealing it is to copy it somewhere. */
.ident { user-select: all; }
.table .btn-inline { padding: .25rem .5rem; font-size: .75rem; margin-left: .4rem; }

/* ------------------------------------------------- two-column application --- */

/* List of own applications on the left, the selected one (or the form) in the
   middle. Collapses to one column on narrow screens - the list is short. */
.layout {
	display: grid;
	grid-template-columns: 17rem 1fr;
	gap: 1.5rem;
	align-items: start;
}

.side-h { font-size: .95rem; margin: 0 0 .75rem; color: var(--muted); font-weight: 500; }
.side-note { margin: -.35rem 0 .9rem; font-size: .75rem; }

.wide-btn { width: 100%; margin-bottom: .5rem; text-align: left; }

.app-item {
	width: 100%;
	display: grid;
	gap: .2rem;
	text-align: left;
	padding: .6rem .7rem;
	margin-bottom: .4rem;
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
	font: inherit;
	font-weight: 400;
	cursor: pointer;
}

.app-item:hover { border-color: var(--accent); background: rgba(255, 255, 255, .03); }
.app-item.active { border-color: var(--accent); background: rgba(184, 135, 58, .08); }
.app-kind { font-weight: 600; font-size: .875rem; }
.app-meta { color: var(--muted); font-size: .75rem; }

.answer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.answer { margin-bottom: 1.5rem; }
.answer-q { color: var(--muted); font-size: .85rem; margin-bottom: .35rem; }
.answer-a { white-space: pre-wrap; overflow-wrap: anywhere; }
.q-hint { margin: -.15rem 0 .45rem; font-size: .78rem; }

@media (max-width: 48rem) {
	.layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- rules contents --- */

.toc-item {
	display: block;
	padding: .3rem .5rem;
	border-left: 2px solid transparent;
	color: var(--muted);
	font-size: .85rem;
	line-height: 1.35;
}

.toc-item:hover { color: var(--text); border-left-color: var(--accent); text-decoration: none; }
.toc-sub { padding-left: 1.25rem; font-size: .8rem; }

/* Sticky so the contents stay reachable through a long page; the header is
   3.5rem and also sticky, hence the offset. */
.side nav { position: sticky; top: 4.5rem; }

.prose h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1rem; margin: 1.75rem 0 .5rem; color: var(--accent); }
.prose li { color: inherit; }
.prose strong { color: var(--text); }

/* Anchor jumps must not hide the target under the sticky header. */
.prose h2, .prose h3 { scroll-margin-top: 5rem; }

/* --- question fields and the yes/no button box ----------------------------- */

.field { margin-bottom: 0; }
.field-label { display: block; margin-bottom: .35rem; color: var(--muted); font-size: .85rem; }

.choice { display: flex; gap: .5rem; margin-bottom: 1rem; }

/* The radio itself is hidden and its <span> is the button. Hidden with opacity and
   zero size rather than display:none, because display:none takes the input out of
   the focus order and the group stops being keyboard-reachable. */
.choice-opt { flex: 1; margin: 0; position: relative; }
.choice-opt input { position: absolute; width: 0; height: 0; padding: 0; border: 0; opacity: 0; }

.choice-opt span {
	display: block;
	margin: 0;
	padding: .6rem .7rem;
	background: #101216;
	border: 1px solid var(--border);
	border-radius: 4px;
	color: var(--text);
	font-size: 1rem;
	text-align: center;
	cursor: pointer;
	user-select: none;
}

.choice-opt span:hover { border-color: var(--accent); }
.choice-opt input:focus-visible + span { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(184, 135, 58, .35); }

.choice-opt input:checked + span {
	background: var(--accent);
	border-color: var(--accent);
	color: #17191d;
	font-weight: 600;
}

/* Marked on submit, cleared as soon as the field is touched. The label goes red too:
   the border alone is easy to miss on a form this long, and the message only names
   the first one. */
.field.invalid > label > span,
.field.invalid > .field-label { color: var(--danger); }
.field.invalid input[type="text"],
.field.invalid textarea { border-color: var(--danger); }
.field.invalid .choice-opt input:not(:checked) + span { border-color: var(--danger); }

/* Sign-out sits alone at the bottom of the account panel, cut off from the settings
   above it by a rule - it is the one control there that ends the session rather than
   changing something in it. */
.signout {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;
}

/* The application card, opened as an extra row under the one that was clicked. The
   cell carries no padding of its own so the panel inside sets the whole inset. */
.detail-row > td { padding: 0 .25rem 1rem; background: transparent; }
.detail-card { margin: 0; }

/* Which row the open card belongs to. Without this the card looks detached from the
   table once it is taller than a screenful. */
.app-row.open > td { background: rgba(184, 135, 58, .08); }
.app-row.open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Approve and reject side by side and the same size. They were stacked with the reason
   field between them, one flex:1 and one width:100%, which made the pair read as two
   unrelated controls of different weight rather than as two halves of one decision. */
.verdict-row { display: flex; gap: .5rem; }
.verdict-row > button { flex: 1 1 0; width: auto; }

/* Outlined like .btn-danger rather than filled: the two are opposite answers to the
   same question and should carry the same visual weight, only a different colour.
   Green matches badge-approved so a decision and its result look like the same thing. */
.btn-approve {
	background: transparent;
	border: 1px solid #5aa469;
	color: #9ed3a9;
	padding: .5rem .8rem;
}

.btn-approve:hover:not(:disabled) { background: rgba(90, 164, 105, .12); }

/* The reason field inside the review card reuses the .field wrapper from the
   application form, purely to inherit its .invalid styling. */
.detail-card .field > label { margin-bottom: .75rem; }

/* The lead: the line that says what the page is, before the text it introduces.
   Larger and set off by a rule, so it reads as a preface rather than as the first
   paragraph of the first section. */
.prose .lead {
	margin: 0 0 2rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: 1.05rem;
	line-height: 1.65;
}