.fg-wrapper {
	--fg-border: #d7dce2;
	--fg-muted: #5f6b76;
	--fg-notice-bar: #1f6f43;
	--fg-button: #004488;
	--fg-button-hover: #00366d;
	--fg-surface: #f7f9fa;
	max-width: 980px;
	color: #1f2933;
}

.fg-wrapper * {
	box-sizing: border-box;
}

/* A target of a jump is only fully visible if nothing that stays in place
   covers it. The height of the WordPress admin bar is known, the height of a
   theme header is not, so the room left above is generous. */
.fg-jump {
	scroll-margin-top: 6rem;
}

.fg-notice {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border-left: 4px solid var(--fg-notice-bar);
	background: #eef8f2;
}

.fg-notice-error {
	border-left-color: #a52828;
	background: #fff1f1;
}

/* The way down to the form, for visitors who came to read the list. It sits
   above the list on purpose: it is the answer to the first thing a visitor
   wants and needs no scrolling to be found. The arrow is decoration and comes
   from the stylesheet, so the text of the link stays a plain text. */
.fg-toplink {
	margin: 0 0 1.25rem;
	text-align: right;
}

.fg-toplink a {
	font-weight: 600;
}

.fg-toplink a::after {
	content: " \2193";
}

.fg-section,
.fg-event-card,
.fg-ride {
	margin: 0 0 1.5rem;
	padding: 1.25rem 0;
	background: #fff;
}

.fg-section > h2,
.fg-section > h3,
.fg-event-card > h3,
.fg-ride > h4 {
	margin-top: 0;
}

.fg-date,
.fg-hint {
	color: var(--fg-muted);
}

/* The date stands in the work duty heading and is only a note next to it. It
   may break across lines: a verbose date format on a narrow screen would
   otherwise push the page sideways. */
.fg-date {
	font-size: 0.9em;
	font-weight: 400;
}

.fg-hint {
	font-size: 0.92rem;
}

/* The note about the two values a member is asked for, in the three forms of
   the plugin that ask for them. It stands between the fields and the button in
   all three, and it is a paragraph on a line of its own, because a note that
   hangs in a field cell reads as if it belonged to that one field. One class for
   the distance in all three forms: three different margins for one place would
   be three places. */
.fg-hint-row {
	margin: 0.75rem 0 0;
}

.fg-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.fg-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.fg-field-full {
	grid-column: 1 / -1;
}

.fg-field label,
.fg-field legend {
	font-weight: 600;
}

.fg-field input[type="text"],
.fg-field input[type="email"],
.fg-field input[type="date"],
.fg-field input[type="time"],
.fg-field select,
.fg-field textarea {
	width: 100%;
	min-height: 2.6rem;
	padding: 0.55rem 0.65rem;
	border: 1px solid #9da7b1;
	border-radius: 4px;
	background: #fff;
	font: inherit;
}

.fg-choice {
	display: flex;
	gap: 0.4rem;
	align-items: center;
}

/* The consent is a sentence, not a field label. It keeps the emphasis of the
   other labels off and is set one step smaller, so it does not outweigh the
   three fields above it. */
.fg-consent {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.4;
}

.fg-consent input {
	margin-top: 0.25rem;
}

.fg-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

/* The button carries no font size of its own: `font: inherit` takes the size of
   the text around it, so the label cannot drift away from the rest of the page
   when a theme sets a larger size. What is left to make a button look big is
   the padding and the weight, and that is what is kept small here. */
.fg-button {
	display: inline-block;
	padding: 0.45rem 0.75rem;
	border: 1px solid var(--fg-button);
	border-radius: 2px;
	background: var(--fg-button);
	color: #fff;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

/* White on #004488 sits at 9.6:1, the hover shade at 12:1. Both are past the
   4.5:1 that small text needs, so the label stays readable in either state. */
.fg-button:hover,
.fg-button:focus {
	border-color: var(--fg-button-hover);
	background: var(--fg-button-hover);
	color: #fff;
}

/* --- the list of rides, denser and in two columns on a wide page --- */

.fg-rides {
	display: grid;
	/* The smallest column may never be wider than the column it stands in. A
	   fixed `380px` is wider than a phone, and a grid whose column is wider than
	   its container pushes the whole page sideways: the reader scrolls
	   horizontally to see a list that was meant to be read downwards. `min()` is
	   what turns the minimum into "380px, but not more than what is there". */
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 0.75rem;
}

.fg-rides .fg-ride {
	margin: 0;
	padding: 0.8rem 0.9rem;
}

/* Mode, origin and name in one heading. The name keeps the emphasis, the two
   attributes in front of it are notes. */
.fg-ride-title {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
}

.fg-badge {
	white-space: nowrap;
}

.fg-origin {
	color: var(--fg-muted);
	font-weight: 400;
}

/* --- the contact form of an entry, closed until it is asked for --- */

.fg-contact-form {
	margin-top: 0.6rem;
}

/* The summary is the button. The marker of the native element would sit in
   front of the label and is not wanted on a control that looks like a button.
   Appearance and marker are set here instead of being inherited from
   .fg-button, so a theme rule cannot decide how this control is drawn. */
details.fg-contact > summary.fg-contact-toggle {
	display: inline-block;
	list-style: none;
	cursor: pointer;
}

details.fg-contact > summary.fg-contact-toggle::-webkit-details-marker {
	display: none;
}

/* One control, one label, and nothing to undo it with. While the form is shut
   the control stands there; while it is open the control is gone and a plain
   line of text reads the same word. A summary cannot be made inert with CSS, so
   the element that carries the word has to be swapped rather than restyled.

   The latch is a span and not a summary: text is not focusable and not
   clickable, so once the form is open nothing on the page can fold it again —
   with the mouse and with the keyboard alike. It is drawn without a frame
   because a frame is what makes a thing look pressable, and this one is not.

   The selectors carry the whole path on purpose, so a theme that styles spans
   or summaries loosely cannot let the control and the latch appear together. */
details.fg-contact > .fg-contact-latch {
	display: none;
}

details.fg-contact[open] > summary.fg-contact-toggle {
	display: none;
}

details.fg-contact[open] > .fg-contact-latch {
	display: block;
	font-weight: 600;
	color: var(--fg-button);
}

.fg-list-hint {
	margin-top: 0.5rem;
}

.fg-empty {
	padding: 1.25rem;
	border: 1px dashed var(--fg-border);
	background: var(--fg-surface);
}

.fg-honeypot {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- the list of work duties: one card per duty, a table of its details --- */

.fg-event-title {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
}

.fg-event-data {
	width: 100%;
	border-collapse: collapse;
}

/* The name of the field keeps the width of its own text and the value takes
   what is left, so a long description wraps instead of pushing the page
   sideways. `width: 1%` is what shrinks the column to its content; the
   alternative, a fixed width in percent, would take space away from the value
   on a narrow screen, and the value is the part that is worth reading. */
.fg-event-data th {
	width: 1%;
	white-space: nowrap;
	text-align: left;
	vertical-align: top;
	padding: 0.35rem 0.9rem 0.35rem 0;
	font-weight: 600;
}

.fg-event-data td {
	vertical-align: top;
	padding: 0.35rem 0;
	overflow-wrap: break-word;
}

.fg-event-data tr + tr th,
.fg-event-data tr + tr td {
	border-top: 1px solid var(--fg-border);
}

/* **Only the name of a row is set in the weight; the value never is.** The name
   is the frame of the row and the value is what is being read, and a value in the
   weight of its name competes with the name for the eye: on a card of seven rows
   the eye lands on three of them and the structure is what is lost. The date was
   the one exception until version 1.24.0, because it is what a reader looks for
   first — but it is the **first row**, and that is emphasis enough. */

/* The number of free places is a value and is therefore not set in the weight,
   like every other value of the card. What tells a full duty from an open one is
   the colour: a zero is a note rather than a warning, because a full duty is the
   normal state of a duty whose people are all there, and the sentence under the
   table already says why. The class of the cell is what the check in the public
   suite reads, and it is also what a theme rule would find. */
.fg-places-none {
	color: var(--fg-muted);
}

/* --- the registration of a work duty, closed until it is asked for --- */

.fg-signup {
	margin-top: 1rem;
}

/* The summary is the button, drawn here and not through .fg-button, because the
   native marker of the element would sit in front of the label and a control
   that looks like a button must not carry one. Appearance and marker are set on
   the whole path to the element, so a theme rule on summaries cannot decide how
   this control is drawn. */
details.fg-signup > summary.fg-signup-toggle {
	display: inline-block;
	list-style: none;
	cursor: pointer;
}

details.fg-signup > summary.fg-signup-toggle::-webkit-details-marker {
	display: none;
}

/* One control, one label, exactly as on the contact form of a ride, and for the
   same reason: a form that has been opened stays open, and several of them may
   stand open at once. See the latch next to .fg-contact-latch above. */
details.fg-signup > .fg-signup-latch {
	display: none;
}

details.fg-signup[open] > summary.fg-signup-toggle {
	display: none;
}

details.fg-signup[open] > .fg-signup-latch {
	display: block;
	font-weight: 600;
	color: var(--fg-button);
}

.fg-signup-form {
	margin-top: 0.9rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fg-border);
}

/* The two fields that name a member, side by side; on a narrow column the row
   wraps. The same row in the two forms that carry it: the signup form of a work
   service and the contact form of a ride. The offer form has the same two
   fields, but as two cells of its own grid, which puts them side by side just
   the same. They are the whole question in all three, so on a wide screen
   neither of them takes a full line. The row carries the two fields and nothing
   else: since version 1.17.0 the note and the button stand below it in all
   three forms, and a button in this row would have to be a third kind of thing
   in a row that only ever holds the two halves of one question. */
.fg-member-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}

.fg-member-row .fg-field {
	flex: 1 1 14rem;
	min-width: 0;
}

/* The labels are not allowed to break. "E-Mail-Adresse" has hyphens in it, and
   that is a place where a browser may wrap without being asked to, which would
   put "E-" over "Mail-Adresse". */
.fg-member-row .fg-field label {
	white-space: nowrap;
}

.fg-signup-form .fg-hint {
	margin: 0.6rem 0 0;
}

.fg-signup-form .fg-actions {
	margin-top: 0.9rem;
}

/* The sentence under a card that cannot be signed up for. It is a note in the
   muted colour of the other notes of the list, because there is nothing here for
   the reader to do. */
.fg-signup-closed {
	margin: 0.9rem 0 0;
	color: var(--fg-muted);
	font-style: italic;
}

@media (max-width: 640px) {
	.fg-form-grid {
		grid-template-columns: 1fr;
	}

	.fg-field-full {
		grid-column: auto;
	}

	/* The name of a row stands **above** its value on a narrow screen. A table
	   with two columns shares the width out: the name takes what its own text
	   needs, the value takes the rest, and on a phone the value — which is the
	   part that is worth reading — is left with a column of ninety pixels while a
	   description runs to forty lines. As blocks the row reads as a small heading
	   over its text, and the value takes the whole width.

	   The line between two rows moves with it: it stands above the name of the
	   second row, and not between the name and the value, which would cut the
	   value off from the name it belongs to. */
	.fg-event-data,
	.fg-event-data tbody,
	.fg-event-data tr,
	.fg-event-data th,
	.fg-event-data td {
		display: block;
		width: auto;
	}

	.fg-event-data th {
		padding: 0.55rem 0 0;
		white-space: normal;
	}

	.fg-event-data td {
		padding: 0.1rem 0 0.45rem;
	}

	.fg-event-data tr + tr th {
		border-top: 1px solid var(--fg-border);
	}

	.fg-event-data tr + tr td {
		border-top: 0;
	}

	/* One field per row in the signup form: the row already wraps, and a field
	   that is 14rem wide inside a phone of 15rem has nothing left for its own
	   error note. */
	.fg-member-row .fg-field {
		flex: 1 1 100%;
	}

	/* The button takes the whole width. A row of buttons next to each other on a
	   phone leaves each of them a strip, and the one that ends the form is the
	   one a thumb has to find. */
	.fg-actions .fg-button {
		width: 100%;
	}

	.fg-rides .fg-ride {
		padding: 0.7rem 0.8rem;
	}
}