* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	min-height: 100vh;
	background-color: #113EF5;
	color: #ffffff;
	margin: 0;
	padding: 2rem;
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
}

h1, h2, h3, h4, h5, h6, p, ol, ul {
	margin-top: 0;
	margin-bottom: 1em;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ol:last-child,
ul:last-child {
	margin-bottom: 0;
}

.logo {
	margin-bottom: 2rem;
}

a {
	color: inherit;
}

.btn--a11y {
	border: none;
	background-color: transparent;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	color: inherit;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn {
	background-color: white;
    border: none;
    padding: 1rem 2rem;
    color: black;
    margin: 3rem 0;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.btn:hover {
	background-color: #1D2125;
	color: white;
}

.btn[disabled],
.btn.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.btn-icon {
	opacity: 1;
	transition: opacity 0.3s;
}

.btn-icon:hover {
	opacity: 0.6;
}

.flex {
	display: flex;
	gap: 0.5rem;
}

.flex--center {
	align-items: center;
	justify-content: center;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "a b"
						 "c c";
	gap: 2rem;
}

.grid--compare {
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-areas: "a b c";
}

.hidden {
	display: none !important;
}

table {
	border-collapse: collapse;
	background-color: #1D2125;
}

table thead tr {
	background-color: #000000;
}

table th,
table td {
	padding: 1rem;
	border: 1px solid #4b5562;
}

table td input {
	width: 100%;
	padding: 1rem;
	border: none;
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #343b44;
}

.tooltip {
	position: relative;
}

.tooltip__icon {
	cursor: help;
	display: block;
}

.tooltip__icon:hover + .tooltip__content,
.tooltip__icon:focus-visible + .tooltip__content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tooltip__content {
	position: absolute;
	bottom: calc(100% + 2rem);
	left: 50%;
	transform: translateX(-50%);
	background-color: #ffffff;
	color: #000000;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	pointer-events: none;
	width: 230px;
    border-radius: 0.5rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
}

.tooltip__content::before {
	content: "";
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 10px;
	height: 10px;
	background-color: #ffffff;
	clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}
.lede {
	max-width: 70ch;
}

.muted {
	opacity: 0.6;
	font-size: 1.3rem;
	display: block;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.4rem;
}

.notice {
	background-color: #1D2125;
	border-left: 4px solid #ffffff;
	padding: 1rem 1.5rem;
	max-width: 70ch;
}

.notice--error {
	border-left-color: #ff5252;
}

.index-status {
	margin-top: 3rem;
	opacity: 0.6;
	font-size: 1.4rem;
}

.index-status--stale {
	opacity: 1;
	color: #ffd166;
}

.btn--inline {
	margin: 0;
	padding: 0.5rem 1rem;
	font-size: 1.4rem;
	text-decoration: none;
	white-space: nowrap;
}

.js-copy.is-copied {
	opacity: 0.4;
}

/* The results table earns the full width; the two-field lookup form does not. */
.table--results {
	width: 100%;
}

table td {
	vertical-align: top;
}

table td input {
	min-width: 26rem;
}

/* Six columns do not fit a phone; let the table scroll rather than clip. */
.table-scroll {
	overflow-x: auto;
}

table th[scope="row"] {
	text-align: left;
	font-weight: 600;
	white-space: nowrap;
}

table th[scope="row"] .muted {
	font-weight: 400;
}

select {
	padding: 1rem;
	background-color: transparent;
	color: #ffffff;
	border: 1px solid #343b44;
	width: 100%;
}

select option {
	background-color: #1D2125;
}

.auth-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.auth-bar .index-status {
	margin: 0;
}

.auth-bar input,
form .flex input[type="password"] {
	padding: 1rem;
	background-color: #1D2125;
	color: #ffffff;
	border: 1px solid #343b44;
}

.auth-bar .btn--inline,
form .flex .btn--inline {
	border: none;
	cursor: pointer;
}

.usage {
	display: block;
	font-variant-numeric: tabular-nums;
}

.usage--near {
	color: #ffd166;
}

.usage--full {
	color: #ff5252;
}

.index-bar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 3rem;
}

.index-bar .index-status {
	margin: 0;
}

.index-bar .auth-bar {
	margin: 0;
}

.combo {
	position: relative;
}

.combo__input {
	width: 100%;
}

.combo__list {
	position: absolute;
	z-index: 10;
	top: 100%;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #1D2125;
	border: 1px solid #4b5562;
	max-height: 32rem;
	overflow-y: auto;
}

.combo__option {
	padding: 0.8rem 1rem;
	cursor: pointer;
	font-size: 1.4rem;
}

.combo__option:hover {
	background-color: #113EF5;
}

.combo__option--new {
	border-bottom: 1px solid #4b5562;
	font-weight: 600;
}

.combo__option--muted,
.combo__option--muted:hover {
	opacity: 0.6;
	cursor: default;
	background-color: transparent;
}

.logout {
	margin-top: 4rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.logout__button {
	opacity: 0.7;
	font-size: 1.4rem;
	text-decoration: underline;
	transition: opacity 0.3s;
}

.logout__button:hover {
	opacity: 1;
}

/* Checkbox and its wrapping label sit on the left edge, with the text block
   aligned to itself rather than trailing under the box. */
.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	text-align: left;
	cursor: pointer;
}

.checkbox__input {
	flex: 0 0 auto;
	width: auto;
	min-width: 0;
	margin: 0.3rem 0 0;
}

.checkbox > span {
	flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Vertical rhythm

   The base rules only give elements a bottom margin, so anything following a
   table or a form butted straight up against it. These fill those gaps without
   disturbing the spacing that already worked.
   --------------------------------------------------------------------------- */

h2 {
	margin-top: 4rem;
}

/* A heading opening the page or a section needs no gap above it. */
h2:first-child {
	margin-top: 0;
}

/* Tables and forms carry no margin of their own, so give whatever follows one. */
.table-scroll,
form {
	margin-bottom: 3rem;
}

.table-scroll + *,
form + *,
table + * {
	margin-top: 3rem;
}

/* A heading after a table already gets its own larger gap; do not add both. */
.table-scroll + h2,
form + h2,
table + h2 {
	margin-top: 4rem;
}

/* Stacked notices should not touch each other. */
.notice + .notice {
	margin-top: 1.5rem;
}

.notice {
	margin-bottom: 2rem;
}

.lede {
	margin-bottom: 2rem;
}

/* The submit button already sets its own generous margin; keep it from
   doubling up with the rule above. */
form .btn[type="submit"] {
	margin-bottom: 0;
}

body {
	padding: 3rem;
}

@media (max-width: 600px) {
	body {
		padding: 2rem 1.5rem;
	}
}

/* The lookup form lost its second column when the password moved to a login
   screen, leaving the query field unnecessarily cramped. */
#query {
	min-width: 38rem;
}

@media (max-width: 600px) {
	#query {
		min-width: 0;
	}
}

/* The account and container pickers drop their list below the field, and an
   overflow container clips it — the list ends up inside the table's own scroll
   area instead of over the page. This table is two columns of field and value,
   so it has nothing to scroll sideways and can simply not clip. Its inputs
   shrink on narrow screens instead. */
.table-scroll--visible {
	overflow: visible;
}

@media (max-width: 700px) {
	.table-scroll--visible table td input,
	.table-scroll--visible table td select {
		min-width: 0;
		width: 100%;
	}
}

/* A hint sitting under a field, rather than beside its label, needs to clear
   the field it belongs to. Only applies inside the value column: the same class
   is used for sub-labels in the row headers, where it sits tight by design. */
td > .muted {
	margin-top: 1rem;
}

/* Revealed by the checkbox above them, so they need to clear it — and each
   other. */
.js-gtm-fields {
	margin-top: 1.5rem;
}

.js-gtm-fields > * + * {
	margin-top: 1rem;
}

/* Google publishes no account quota, so the limit is an editable guess rather
   than a fact. Keep it small and out of the way. */
.limit-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
}

.limit-form input[type="number"] {
	width: 8rem;
	min-width: 0;
	padding: 0.4rem 0.6rem;
	font-size: 1.3rem;
}

.limit-form .btn--inline {
	padding: 0.4rem 1rem;
	font-size: 1.3rem;
	border: none;
	cursor: pointer;
}