/* Site-specific styles. Everything else comes from the Bootswatch cyborg theme. */

/* Lato and Fira Code, self-hosted (SIL Open Font License 1.1). Named by
   bootstrap.min.css's --bs-font-sans-serif/--bs-font-monospace, ahead of
   the system-font fallbacks defined there. Served immutable — a new
   version needs a new filename, not a ?v= bump. */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url(/static/fonts/lato-300.woff2) format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/static/fonts/lato-400.woff2) format("woff2");
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/static/fonts/lato-700.woff2) format("woff2");
}

@font-face {
	font-family: "Fira Code";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/static/fonts/fira-code-400.woff2) format("woff2");
}

[v-cloak] { display: none; }

/* Match the browser scrollbar to cyborg's palette instead of the OS/browser
   default (usually light), which stands out against the near-black page. */
html {
	scrollbar-color: var(--bs-gray-600) var(--bs-body-bg);
}

html::-webkit-scrollbar {
	width: 14px;
}

html::-webkit-scrollbar-track {
	background: var(--bs-body-bg);
}

html::-webkit-scrollbar-thumb {
	background: var(--bs-gray-600);
	border: 3px solid var(--bs-body-bg);
	border-radius: var(--bs-border-radius);
}

html::-webkit-scrollbar-thumb:hover {
	background: var(--bs-primary);
}

/* Cyborg's navbar variables assume a light navbar, so set our own surface and
   brand colour explicitly. */
.navbar {
	background: var(--bs-gray-800);
}

.navbar-brand {
	letter-spacing: 0.05em;
}

/* The count box: a number input with a datalist of presets, sitting inside
   the format input-group. Bootstrap makes input-group fields stretch, so
   pin this one to a fixed width. */
.input-group > .count-input {
	flex: 0 0 auto;
	width: 7.5rem;
	text-align: right;
}

/* Chrome's number-input spinner is its own pseudo-element pinned to the
   inner-right edge — padding on the input pushes it and the text inward
   together rather than opening a gap between them, so the gap has to come
   from the spinner's own margin instead. Firefox's spinner isn't a
   pseudo-element in the same way and doesn't need this. */
.count-input::-webkit-inner-spin-button {
	margin-left: 0.5rem;
}

/* The grid of generated codes. Column width comes from the longest code
   (--code-chars, set by app.js) plus room for the button padding and copy
   icon, so short codes pack into more columns and long ones into fewer.
   auto-fill adds as many columns as fit; the last row may be ragged.
   The font is set here so 1ch matches the codes' monospace glyph width. */
.code-grid {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(9rem, calc(var(--code-chars, 12) * 1ch + 4.5rem))), 1fr));
	font-family: var(--bs-font-monospace);
	font-size: 1rem;
}

/* One generated code. It's a <button> so it's keyboard-accessible and
   clicking anywhere on it copies the code. */
.code-item {
	--code-bg: #121212;
	--code-bg-hover: #1e1e1e;

	display: flex;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	background: var(--code-bg);
	color: var(--bs-body-color);
	font-family: var(--bs-font-monospace);
	overflow-wrap: anywhere;
}

.code-item:hover,
.code-item:focus-visible {
	background: var(--code-bg-hover);
	color: var(--bs-body-color);
}

.code-item .bi {
	margin-left: auto;
	color: var(--bs-gray-600);
}

.code-item:hover .bi {
	color: var(--bs-body-color);
}

/* The text/JSON view of the codes, styled to match the grid items. */
.code-text {
	background: #121212;
	border: 0;
	color: var(--bs-body-color);
	resize: vertical;
	white-space: pre;
}

.code-text:focus {
	background: #121212;
	color: var(--bs-body-color);
}

.syntax-table code {
	white-space: nowrap;
}

/* A standalone example (the FAQ's curl command and sample response),
   boxed to match the code grid/textarea rather than sitting as plain text. */
.code-block {
	background: #121212;
	border-radius: var(--bs-border-radius);
	padding: 0.75rem 1rem;
}

.code-block code {
	background: none;
	color: inherit;
	padding: 0;
	white-space: pre-wrap;
	word-break: break-all;
}

/* Phones (below Bootstrap's sm breakpoint). index.html puts a hidden
   .w-100 line break after the format input, so the input-group wraps into
   two rows: the format input on its own, then count / Regenerate / help.
   Bootstrap squares off the inner corners of every input-group child with
   high-specificity selectors, so restoring the corners at the row ends
   needs !important. */
@media (max-width: 575.98px) {
	.input-group > .format-input {
		border-top-right-radius: var(--bs-border-radius-lg) !important;
		border-bottom-right-radius: var(--bs-border-radius-lg) !important;
	}

	.input-group > .count-input {
		flex: 1 1 auto;
		margin-top: 0.5rem;
		margin-left: 0 !important;
		border-top-left-radius: var(--bs-border-radius-lg) !important;
		border-bottom-left-radius: var(--bs-border-radius-lg) !important;
	}

	.input-group > .count-input ~ .btn {
		margin-top: 0.5rem;
	}

	/* Let long syntax examples wrap rather than squeezing the descriptions. */
	.syntax-table code {
		white-space: normal;
	}
}

.faq h3 {
	margin-top: 1.75rem;
}

.faq h3:first-child {
	margin-top: 0;
}