/* L44 Bookings — the list on a page.
 * -------------------------------------------------------------------------
 * A full-width strip of the page colour with the list on a 1000px measure
 * inside it, built the same way as the sign-up sheet — whoever is on the door
 * sees one thing, however the booking was taken.
 *
 * The rows are a grid rather than a table: a table of three columns on a phone
 * either scrolls sideways or squeezes an email address into nothing, and
 * neither is much use at a door.
 */

.l44b-sheet {
	background: #dcdcdc;
	margin: 0;

	/* Little above and less underneath. Two of these bands one after another —
	   this list and the sign-up sheet — put their padding back to back, and the
	   gap between them read as a break in the page rather than two parts of one
	   thing. */
	padding: 20px 0 6px;
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #181617;
}

/* The heading, on the measure, as the sign-up sheet has. */
.l44b-sheet__title {
	margin: 0 0 14px !important;
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

/* Wider than the site's thousand, deliberately.

   Everywhere a reader goes is held to a thousand-pixel measure, because a line
   of prose longer than that is tiring to read. This is not that. It is a list
   of who is coming, with a name, an address and an order against each, and the
   constraint that helps prose only squeezes those columns into each other. So
   it takes the room it needs and keeps a gutter at both ends.

   One number, here, if it should be wider or narrower. */
.l44b-sheet {
	--l44b-measure: 1400px;
	--l44b-inset: 35px;
}

.l44b-sheet__inner {
	width: 100%;
	max-width: calc( var(--l44b-measure, 1400px) + var(--l44b-inset, 35px) * 2 );
	margin: 0 auto;
	padding-left: var(--l44b-inset, 35px);
	padding-right: var(--l44b-inset, 35px);
	box-sizing: border-box;
}

/* A category, holding its own events.
   
   Open to begin with, so the events can be seen without anything being pressed
   — it is the attendee lists that are folded away, since those are long and
   only one is wanted at a time. */
.l44b-cat {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.l44b-cat:last-child { margin-bottom: 0 !important; }
.l44b-cat > .l44b-card:last-of-type { margin-bottom: 0 !important; }

.l44b-cat__head,
.l44b-card__head {
	cursor: pointer;
	list-style: none !important;   /* the arrow is drawn below, not by the browser */
	user-select: none;
}

.l44b-cat__head::-webkit-details-marker,
.l44b-card__head::-webkit-details-marker { display: none; }

/* The category, in its own colour — the calendar's, inherited from the colour
   parent, so a category reads the same here as it does there. The colour itself
   is written on the element, since it belongs to the category rather than to
   the stylesheet. */
.l44b-cat__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
	padding: 9px 14px;
	/* Twice the size, and white on whatever colour the category carries.
	   
	   These bars are the only thing on the page that separates one evening's
	   worth of bookings from another's, and at twelve pixels they read as a
	   label on the rows rather than as the thing dividing them. White because
	   the colours are chosen for the category, not for legibility — green,
	   yellow and red take dark text differently, and one of the three always
	   loses. */
	font-size: 24px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #ffffff;
}

/* Drawn rather than typed, so it can turn when the section opens. */
.l44b-cat__head::before,
.l44b-card__head::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;   /* whatever the chip's text is */
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: translateY(-1px);
	transition: transform .15s ease;
	opacity: .55;
}

.l44b-cat[open] > .l44b-cat__head::before,
.l44b-card[open] > .l44b-card__head::before { transform: rotate(90deg) translateX(-1px); }

/* The count sits in a wash of the colour it is on rather than a grey box, which
   would be a third colour on a chip that already has two. */
.l44b-cat__count {
	margin-left: auto;
	padding: 2px 8px;
	background: rgba( 255, 255, 255, .3 );
	font-size: 11px;
	letter-spacing: .02em;
}

/* One card an event.
   
   Written with the theme in mind rather than against it: this theme skins every
   list, heading and span on the site, so each of these says outright what it
   is. Left to inherit, the rows came out as bulleted list items a few
   characters wide, with each name broken one letter to a line. */
.l44b-card {
	background: #ffffff;
	margin: 0 0 10px !important;
	padding: 0 !important;
	border: 1px solid #efefef;
	list-style: none !important;
}

.l44b-card__head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 16px;
	font-size: 16px;
	line-height: 1.25;
}

/* The line under the heading belongs to an open card. On a closed one it would
   be a rule under a single line with nothing beneath it. */
.l44b-card[open] > .l44b-card__head { border-bottom: 1px solid #efefef; }
.l44b-card:hover > .l44b-card__head { background: #fbfbfb; }

.l44b-card__date {
	flex: 0 0 auto;
	min-width: 92px;
	font-size: 13px;
	color: #6c6a6b;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
}

.l44b-card__name {
	flex: 1 1 auto;
	min-width: 0;
	text-transform: uppercase;
}

.l44b-card__left {
	flex: 0 0 auto;
	font-size: 12px;
	color: #6c6a6b;
	white-space: nowrap;
}

.l44b-card__none {
	margin: 0 !important;
	padding: 14px 16px !important;
	font-size: 14px;
	color: #6c6a6b;
}

/* The rows.
   
   A grid rather than a table, so the columns can be rearranged on a phone
   instead of scrolling sideways — an email address in a table column on a
   narrow screen is unreadable, and a door list that cannot be read is no use. */
.l44b-rows { display: block; }

.l44b-row {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 90px 96px;
	align-items: center;
	gap: 12px;
	padding: 11px 16px;
	border-top: 1px solid #f4f4f4;
	font-size: 15px;
}

.l44b-row:first-child { border-top: 0; }

.l44b-row--head {
	padding-top: 12px;
	padding-bottom: 10px;
	border-top: 0;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6c6a6b;
}

/* A second person on the same booking: the line between them is lighter, so
   the two read as one booking without anything having to say so. */
.l44b-row.is-same { border-top-color: #fbfbfb; }

.l44b-row__who { min-width: 0; overflow-wrap: anywhere; }

/* Under a name at a sign-up event: the answers to the event's own questions,
   small and grey, the same grey as the email beside it. */
.l44b-row__extra {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.35;
	color: #6c6a6b;
}

.l44b-row__mail {
	min-width: 0;
	font-size: 14px;
	color: #6c6a6b;
	overflow-wrap: anywhere;
}

.l44b-row__ref {
	font-size: 14px;
	color: #6c6a6b;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.l44b-pill {
	display: inline-block;
	padding: 3px 9px;
	font-size: 12px;
	letter-spacing: .02em;
	white-space: nowrap;
}

.l44b-pill--count { background: #efefef; color: #181617; }
.l44b-pill.is-paid { background: #00a95c; color: #ffffff; }
.l44b-pill.is-free { background: #efefef; color: #6c6a6b; }
.l44b-pill.is-unpaid { background: #ffb511; color: #181617; }
.l44b-pill.is-unknown { background: #efefef; color: #6c6a6b; }

/* The way in, when the reader is not signed in. */
.l44b-gate {
	background: #dcdcdc;
	margin: 20px 0;
	padding: 26px 0 30px;
	font-family: "CoFoSans Regular", "CoFo Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: #181617;
}

/* The signed-out state of the same band, and a few lines of writing rather
   than a table — so it keeps the reading measure the rest of the site uses
   instead of following the sheet out to its full width. */
.l44b-gate {
	--l44b-inset: 35px;
}

.l44b-gate__inner {
	width: 100%;
	max-width: calc( 1000px + var(--l44b-inset, 35px) * 2 );
	margin: 0 auto;
	padding-left: var(--l44b-inset, 35px);
	padding-right: var(--l44b-inset, 35px);
	box-sizing: border-box;
}

/* Below the measure the inset becomes the phone's gutter, for both bands. */
@media (max-width: 1000px) {
	.l44b-sheet,
	.l44b-gate { --l44b-inset: 15px; }
}

.l44b-gate p { margin: 0 0 12px; font-size: 15px; }

.l44b-gate label {
	display: block;
	max-width: 320px;
	margin-bottom: 10px;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #6c6a6b;
}

/* The theme skins every input on the site, so each of these has to be said
   outright rather than left to inherit something reasonable. */
.l44b-gate input {
	display: block !important;
	width: 100% !important;
	margin-top: 4px !important;
	padding: 11px 12px !important;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 0 !important;
	font: inherit !important;
	font-size: 15px !important;
	color: #181617 !important;
	text-transform: none !important;
	box-sizing: border-box !important;
}

.l44b-gate button {
	margin-top: 4px !important;
	padding: 11px 22px !important;
	background: #00a95c !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font: inherit !important;
	font-size: 13px !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	cursor: pointer !important;
}

.l44b-gate button:hover { background: #00934f !important; }

@media (max-width: 700px) {
	.l44b-sheet { margin: 0; padding: 14px 0 6px; }
	.l44b-gate { margin: 14px 0; padding: 18px 0 20px; }
	.l44b-sheet__title { font-size: 19px; }

	.l44b-card__head {
		flex-wrap: wrap;
		gap: 4px 10px;
		font-size: 15px;
	}

	.l44b-card__date { min-width: 0; }
	.l44b-card__name { flex: 1 0 100%; order: 3; }

	/* Two columns, and the email beneath the name: four across a phone leaves
	   an address in a space too narrow to read. The heading row goes entirely —
	   it is labelling columns that are no longer side by side. */
	.l44b-row--head { display: none; }

	.l44b-row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 10px;
		padding: 12px 14px;
	}

	.l44b-row__who { grid-column: 1; }
	.l44b-row__ref { grid-column: 2; grid-row: 1; text-align: right; }
	.l44b-row__mail { grid-column: 1; }
	.l44b-row__pay { grid-column: 2; grid-row: 2; text-align: right; }
}

/* ---- the lists' page, edge to edge ----
   The block holding the bookings list and the shop orders, laid across the
   whole window by the desk's inline script (l44desk_wide_script), with an
   even margin either side: 50px on a wide screen, 15px on a phone. The lists
   inside give up their own insets, so the margin is the only one. */
.l44desk-wide {
	box-sizing: border-box !important;
	max-width: none !important;
	padding-left: 50px !important;
	padding-right: 50px !important;
}

@media (max-width: 1000px) {
	.l44desk-wide {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
}

.l44desk-wide .l44b-sheet,
.l44b-sheet.l44desk-wide { --l44b-inset: 0px; }

.l44desk-wide .l44b-sheet__inner { max-width: none; }

/* A section that is the holder itself keeps the margin as its own padding. */
.l44b-sheet.l44desk-wide .l44b-sheet__inner { padding-left: 0; padding-right: 0; }