/* ===========================================================================
   Obsidium Verify — stylesheet

   Colours, spacing and structure are taken 1:1 from the Cobalt style used on
   obsidium.space: the same #131311 wrapper, the same #272726 boxes with a
   #4f4f4d border, the same gradient title bars, the same Verdana 11px body
   and the same #9b5de5 links.

   The only deliberate difference is width — this is a single panel, so it
   sits at 600px instead of Cobalt's 1070px. Everything inside keeps its
   native size.
   =========================================================================== */

:root {
	--bg:            #020202;  /* page background          */
	--wrap:          #131311;  /* content area             */
	--box:           #272726;  /* boxes                    */
	--box-alt:       #303030;  /* inset / highlighted rows */
	--border:        #4f4f4d;  /* box border               */
	--border-soft:   #606060;  /* fieldsets, insets        */

	--text:          #d4d4d4;
	--text-strong:   #eaeaea;
	--text-dim:      #888;
	--text-head:     #bbb;     /* title bar text           */

	--accent:        #9b5de5;  /* links, legends           */
	--accent-hover:  #80d6ff;
	--accent-strong: #7c3aed;  /* wordmark, accent rules   */
	--accent-soft:   #c084fc;

	--menu:          #565656;
	--input:         #212122;
	--input-border:  #3e3e3e;

	--blurple:       #5865f2;

	--ok:            #6ee7a8;
	--danger:        #ba2323;
	--danger-text:   #f3a5a5;

	--radius:        4px;
}

/* ---------------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------------- */

html, body {
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--bg);
	color: var(--text);
}

.pun {
	max-width: 600px;
	width: 95%;
	margin: 0 auto;
	padding: 12px 20px;
	color: var(--text);
	font: 11px/1.45 Verdana, Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.pun *,
.pun *::before,
.pun *::after {
	box-sizing: inherit;
}

.pun div, .pun form, .pun p, .pun h1, .pun h2, .pun h3,
.pun ul, .pun li, .pun dl, .pun dt, .pun dd, .pun fieldset, .pun img {
	margin: 0;
	padding: 0;
	border: 0;
}

.pun ul {
	list-style: none;
}

.pun p {
	font-size: 11px;
	padding: 3px 0;
}

.pun strong { font-weight: bold; }

.pun .mono {
	font-family: consolas, monaco, "bitstream vera sans mono", "courier new", monospace;
	font-size: 11px;
}

.clearer { clear: both; height: 0; overflow: hidden; }
.conl    { float: left; }
.conr    { float: right; text-align: right; }

.punwrap {
	background-color: var(--wrap);
	padding: 20px;
	border-radius: var(--radius);
}

/* ---------------------------------------------------------------------------
   2. Boxes and title bars
   --------------------------------------------------------------------------- */

.pun .block,
.pun .blockform {
	margin-bottom: 12px;
}

.pun .box {
	background-color: var(--box);
	border: 1px solid var(--border);
}

.pun .inbox {
	padding: 3px 6px;
}

.pun h2 {
	background-image: linear-gradient(to bottom, #343433 0%, #272726 100%);
	background-repeat: repeat-x;
	border-top: 1px solid var(--border);
	border-right: 1px solid var(--border);
	border-left: 1px solid var(--border);
	border-top-left-radius: var(--radius);
	border-top-right-radius: var(--radius);
	padding: 5px;
	font-size: 11px;
	font-weight: bold;
	line-height: 1.4;
	color: var(--text-head);
}

/* ---------------------------------------------------------------------------
   3. Header
   --------------------------------------------------------------------------- */

#hdr {
	margin: 0 0 12px 0;
}

#hdr .box {
	border-top-width: 4px;
	border-radius: var(--radius);
}

#title h1 {
	font-family: 'Raleway', Verdana, sans-serif;
	font-size: 20px;
	font-weight: 900;
	padding: 3px 0 0 0;
	line-height: 1.3;
}

#title h1 a          { color: var(--text-strong); text-decoration: none; }
#title h1 a span     { color: var(--accent-strong); }
#title h1 a:hover    { color: #fff; }

#menu {
	background-color: var(--menu);
	color: var(--text);
	margin-top: 4px;
}

#menu li {
	display: inline;
	margin-right: 12px;
}

#menu a,
#menu .navbutton {
	color: var(--text);
	text-decoration: none;
}

#menu a:hover,
#menu .navbutton:hover {
	color: var(--text);
	text-decoration: underline;
}

/* Sign-out is a POST form but should read like the other menu entries. */
#menu form {
	display: inline;
}

.navbutton {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--text);
	cursor: pointer;
}

#welcome {
	padding-top: 4px;
}

/* ---------------------------------------------------------------------------
   4. Links
   --------------------------------------------------------------------------- */

.pun a {
	color: var(--accent);
	text-decoration: none;
}

.pun a:hover,
.pun a:focus {
	color: var(--accent-hover);
}

/* ---------------------------------------------------------------------------
   5. Forms
   --------------------------------------------------------------------------- */

.pun .blockform form,
.pun .blockform .formbody {
	padding: 20px 20px 15px 20px;
}

/* A form nested inside .formbody must not add padding a second time. */
.pun .blockform .formbody form {
	padding: 0;
}

.pun .inform {
	padding-bottom: 12px;
}

.pun fieldset {
	border: 1px solid var(--border-soft);
	padding: 0 12px;
}

.pun legend {
	padding: 0 6px;
	color: var(--accent);
	font-size: 11px;
}

.pun .infldset {
	padding: 9px 0 12px 0;
}

.pun label {
	display: block;
	padding: 3px 0;
	font-size: 11px;
}

.pun input {
	background-color: var(--input);
	color: #ccc;
	border: 1px solid var(--input-border);
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	padding: 5px 6px;
	border-radius: 2px;
}

.pun input:hover {
	background-color: #1b1b1b;
	border-color: #444;
}

.pun input:focus {
	outline: none;
	border-color: #666;
	color: #eee;
}

.pun input.longinput {
	width: 100%;
	max-width: 260px;
}

.pun .buttons {
	padding: 6px 0 0 12px;
}

/* Buttons pick up the gradient of the title bars. */
.pun input[type="submit"],
.pun button {
	background-image: linear-gradient(to bottom, #343433 0%, #272726 100%);
	background-color: var(--box);
	border: 1px solid var(--border);
	color: #ddd;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	padding: 7px 16px;
	border-radius: var(--radius);
	cursor: pointer;
}

.pun input[type="submit"]:hover,
.pun button:hover {
	background-image: linear-gradient(to bottom, #3d3d3c 0%, #2f2f2e 100%);
	border-color: #6a6a68;
	color: #fff;
}

/* A link that should read as a button. */
.pun a.btnlink {
	display: inline-block;
	background-image: linear-gradient(to bottom, #343433 0%, #272726 100%);
	background-color: var(--box);
	border: 1px solid var(--border);
	color: #ddd;
	font-size: 11px;
	font-weight: bold;
	padding: 7px 16px;
	border-radius: var(--radius);
	text-decoration: none;
}

.pun a.btnlink:hover {
	background-image: linear-gradient(to bottom, #3d3d3c 0%, #2f2f2e 100%);
	border-color: #6a6a68;
	color: #fff;
	text-decoration: none;
}

/* The Discord action is the one thing this page exists for. */
.pun button.btn-discord {
	background-image: linear-gradient(to bottom, #5865f2 0%, #4752c4 100%);
	border-color: #3c45a5;
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pun button.btn-discord:hover {
	background-image: linear-gradient(to bottom, #6b76f5 0%, #5560d4 100%);
	border-color: #7c86f7;
	color: #fff;
}

.pun button.btn-discord svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.pun button.btn-danger {
	background-image: linear-gradient(to bottom, #3a2424 0%, #2b1d1d 100%);
	border-color: #5c3535;
	color: #e0b4b4;
}

.pun button.btn-danger:hover {
	background-image: linear-gradient(to bottom, #4a2c2c 0%, #382323 100%);
	border-color: var(--danger);
	color: #fff;
}

/* Several forms sitting side by side in one button row. */
.pun .inlineform {
	display: inline-block;
	padding: 0;
	margin: 0 8px 0 0;
}

.pun .forminfo {
	background-color: var(--box-alt);
	border: 1px solid var(--border-soft);
	margin-bottom: 12px;
	padding: 9px 10px;
}

.pun .forminfo p {
	color: #bbb;
}

.pun .desc {
	font-size: 10px;
	color: var(--text-dim);
	padding: 3px 0 0 0;
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   6. Messages
   --------------------------------------------------------------------------- */

.pun .msgbox {
	margin-bottom: 12px;
	padding: 9px 12px;
	border: 1px solid var(--border-soft);
	background-color: var(--box-alt);
	font-size: 11px;
	line-height: 1.5;
	border-radius: 2px;
}

.pun .msgbox-ok {
	border-color: #2f6f4f;
	background-color: #17251d;
	color: var(--ok);
}

.pun .msgbox-err {
	border-color: var(--danger);
	background-color: #251717;
	color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   7. Linked state
   --------------------------------------------------------------------------- */

.pun .linked {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background-color: var(--box-alt);
	border: 1px solid var(--border-soft);
	margin-bottom: 12px;
}

.pun .linked .mark {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--blurple);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.pun .linked .mark svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.pun .linked .who {
	min-width: 0;
}

.pun .linked .who p {
	padding: 0;
}

.pun .linked .who .name {
	font-weight: bold;
	color: var(--text-strong);
	font-size: 11px;
}

.pun .linked .who .id {
	color: var(--text-dim);
	font-size: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pun .pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background-color: #1f3b2c;
	color: var(--ok);
	border: 1px solid #2f6f4f;
	margin-left: 4px;
}

/* The invite code: meant to be read off the screen and copied. */
.pun fieldset.invite {
	border-color: var(--accent-strong);
	margin-top: 12px;
}

.pun fieldset.invite legend {
	color: var(--accent-soft);
	font-weight: bold;
}

.pun .code {
	background-color: #1a1226;
	border: 1px solid #3d2a63;
	border-radius: 2px;
	padding: 9px 10px;
	color: #e6dcff;
	font-size: 11px;
	letter-spacing: 0.4px;
	word-break: break-all;
	user-select: all;
}

/* ---------------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------------- */

#footer .box {
	border-radius: var(--radius);
}

#footer p,
#footer li {
	font-size: 10px;
	color: var(--text-dim);
}

#footer li {
	display: inline;
	margin-right: 12px;
}

/* ---------------------------------------------------------------------------
   9. Narrow screens
   --------------------------------------------------------------------------- */

@media (max-width: 520px) {
	.pun {
		width: 100%;
		padding: 8px;
	}

	.punwrap {
		padding: 12px;
	}

	.pun .blockform form {
		padding: 14px 14px 10px 14px;
	}

	.pun input.longinput {
		max-width: 100%;
	}

	.pun .buttons {
		padding-left: 0;
	}

	.pun .inlineform {
		display: block;
		margin: 0 0 8px 0;
	}

	.pun .inlineform button {
		width: 100%;
	}

	#welcome .conl,
	#welcome .conr {
		float: none;
		text-align: left;
	}
}