/*
 * Buzz 2026 UI — the shared components of the new look.
 *
 * Registered by frontend\assets\UiAsset. Colours, fonts, radii and spacing come
 * from brand.css; nothing here writes a value of its own that a token covers.
 *
 * HOW A PAGE OPTS IN
 * Put the class `bz` on the page's outermost element (the <body> in a layout of
 * its own, or the wrapper <div> for a page inside the portal layout) and depend
 * on UiAsset. Everything below is scoped under .bz, for two reasons:
 *
 *   1. Legacy pages are untouched. The portal layout loads globalbs4.css,
 *      which restyles bare body, a and h1-h6, and the Bootstrap re-theme at the
 *      bottom of this file restyles .card, .btn and .form-control. None of it
 *      reaches a page without .bz, so pages move over one at a time.
 *   2. Specificity. `.bz .bz-btn` is (0,2,0), which outranks both globalbs4's
 *      `a:hover` (0,1,1) and a page's own `.xyz a` (0,1,1) — the fight that
 *      once left a green button label painted green on its own green fill.
 *
 * A page's own stylesheet (timetable.css, reformer.css, join26.css) keeps only
 * what is specific to it, and may adjust a component under its own scope.
 *
 * ACCESSIBILITY, and it is not decoration: no state here is carried by colour
 * alone. A pressed chip is filled AND ticked; a notice has a title; the focus
 * ring is white and 3px wide, because several of the staff reading these
 * screens every day are colourblind and plenty of members use a keyboard.
 */

/* ------------------------------------------------------------------ scope -- */

.bz {
	/* The tick drawn inside a pressed chip. Masked, so it takes the chip's own
	   text colour instead of needing a second rule per state. */
	--bz-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}

.bz *,
.bz *::before,
.bz *::after {
	box-sizing: border-box;
}

/*
 * The hidden attribute has to beat any display a component sets for itself.
 *
 * [hidden] { display: none } lives in the browser's own stylesheet, and ANY
 * author display declaration outranks a UA one whatever the specificity. So a
 * card that is display:flex stays on screen after el.hidden = true: the
 * attribute is set, a test counting :not([hidden]) passes, and nothing moves.
 * That shipped for real on the Reformer timetable. Bootstrap's reboot carries
 * the same rule, but the Reformer page loads no Bootstrap, so it lives here.
 */
.bz [hidden] {
	display: none !important;
}

.bz :focus-visible {
	outline: 3px solid var(--buzz-focus-ring);
	outline-offset: 2px;
}

/* Visually hidden, still read aloud. The Reformer page has no Bootstrap and so
   no .visually-hidden. */
.bz-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- typography -- */

/* Oswald italic uppercase is the public site's display voice. Oswald ships no
   italic face, so this is a synthesised oblique: request Oswald:wght@700,
   never ital,wght, or the browser asks for a file that does not exist.
   .bz-display is the voice alone; the page picks the size. */
.bz .bz-display,
.bz .bz-title {
	font-family: var(--buzz-font-display);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	line-height: 0.98;
	margin: 0;
}

/* A title: the one at the top of a screen, or a section's on a long landing
   page. */
.bz .bz-title {
	font-size: clamp(32px, 5vw, 52px);
	color: var(--buzz-text);
	margin: 0 0 var(--buzz-space-3);
}

.bz .bz-title em {
	color: var(--buzz-green);
	font-style: italic;
}

/* The small green label with a rule before it that sits above a title. */
.bz .bz-kicker {
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.22em;
	color: var(--buzz-green);
	margin: 0 0 var(--buzz-space-3);
	display: flex;
	align-items: center;
	gap: 10px;
}

.bz .bz-kicker::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--buzz-green);
	flex: 0 0 auto;
}

/* The standfirst under a title. */
.bz .bz-lead {
	font-size: 16px;
	color: var(--buzz-text-soft);
	max-width: 60ch;
	margin: 0 0 var(--buzz-space-4);
}

/* Tiny spaced capitals: filter-row labels, "you chose" captions, table heads. */
.bz .bz-eyebrow {
	display: block;
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--buzz-text-muted);
	margin: 0;
}

/* ---------------------------------------------------------------- buttons -- */

/*
 * One button. Green fill, black Montserrat capitals, pill ends.
 *
 * Black on green, not white: white on #76b711 is about 2.5:1 and fails the
 * WCAG AA minimum of 4.5:1; black is about 8.6:1. The label colour is set with
 * !important because half of these are anchors, and the legacy portal's link
 * rules are themselves !important in places.
 */
.bz .bz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--buzz-space-2);
	background: var(--buzz-green);
	border: 2px solid var(--buzz-green);
	border-radius: var(--buzz-radius-pill);
	color: var(--buzz-on-accent) !important;
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 11px 22px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bz .bz-btn:hover {
	background: var(--buzz-green-bright);
	border-color: var(--buzz-green-bright);
}

.bz .bz-btn:disabled,
.bz .bz-btn[aria-disabled="true"] {
	opacity: 0.45;
	/* No hover state at all, rather than a :not(:disabled) on every hover
	   rule, which would out-rank the variants' own hovers. */
	pointer-events: none;
}

/* Secondary action: an outline that turns green on hover. */
.bz .bz-btn--ghost {
	background: transparent;
	border-color: var(--buzz-line-strong);
	color: var(--buzz-text) !important;
}

.bz .bz-btn--ghost:hover {
	background: transparent;
	border-color: var(--buzz-green);
	color: var(--buzz-green) !important;
}

/* Destructive action (cancel a booking, leave a waiting list). Outlined until
   hovered, so it never competes with the main action beside it. */
.bz .bz-btn--danger {
	background: transparent;
	border-color: var(--buzz-red);
	color: var(--buzz-red-text) !important;
}

.bz .bz-btn--danger:hover {
	background: var(--buzz-red);
	border-color: var(--buzz-red);
	/* Black, as on green: white on #eb3636 is about 4.1:1, black about 5.1:1. */
	color: var(--buzz-on-accent) !important;
}

.bz .bz-btn--sm {
	font-size: 11px;
	padding: 7px 15px;
}

.bz .bz-btn--lg {
	font-size: 14px;
	padding: 15px 26px;
}

.bz .bz-btn--block {
	display: flex;
	width: 100%;
}

/* ------------------------------------------------------------------ chips -- */

/*
 * A chip is a small toggle: a filter to switch on, or one answer of several.
 * Two ways to mark it up, both styled the same:
 *
 *   <button class="bz-chip" aria-pressed="true">   — a toggle driven by JS
 *   <span class="bz-chips"><input …><label>        — a real radio or checkbox,
 *                                                     visually hidden, with the
 *                                                     label as the chip
 *
 * Pressed is filled green AND ticked. The fill alone would be invisible to
 * anyone who cannot separate our green from our grey.
 */
.bz .bz-chip,
.bz .bz-chips label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-pill);
	color: var(--buzz-text-soft);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 7px 15px;
	cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}

.bz .bz-chip:hover,
.bz .bz-chips label:hover {
	border-color: var(--buzz-line-strong);
	color: var(--buzz-text);
}

.bz .bz-chip[aria-pressed="true"],
.bz .bz-chips input:checked + label {
	background: var(--buzz-green);
	border-color: var(--buzz-green);
	color: var(--buzz-on-accent);
}

.bz .bz-chip[aria-pressed="true"]::before,
.bz .bz-chips input:checked + label::before {
	content: "";
	width: 11px;
	height: 11px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask: var(--bz-tick) center / contain no-repeat;
	mask: var(--bz-tick) center / contain no-repeat;
}

.bz .bz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--buzz-space-2);
}

.bz .bz-chips input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

/* The real radio is off-screen, so its focus ring is drawn on the label. */
.bz .bz-chips input:focus-visible + label {
	outline: 3px solid var(--buzz-focus-ring);
	outline-offset: 2px;
}

/* Answers in a form: sentence case and a bigger tap target. */
.bz .bz-chips--lg label,
.bz .bz-chip--lg {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	padding: 10px 20px;
}

/* "Clear filters" reads as an action on the chips, not one of them. */
.bz .bz-chip--clear {
	background: none;
	border-style: dashed;
	color: var(--buzz-text-muted);
}

/* A <select> wearing the chip shape, so a filter row with a dropdown in it
   reads as one set of controls. */
.bz select.bz-chip {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 11px;
}

.bz select.bz-chip option {
	background: var(--buzz-surface-1);
	color: var(--buzz-text);
}

/* ------------------------------------------------------ segmented toggle -- */

/*
 * Two or three mutually exclusive views or options in one pill. The "on"
 * segment is whichever carries aria-pressed="true", .is-on, or is the label of
 * a checked radio.
 */
.bz .bz-seg {
	display: inline-flex;
	flex-wrap: wrap;
	max-width: 100%;
	gap: 3px;
	padding: 3px;
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-pill);
}

.bz .bz-seg button,
.bz .bz-seg label {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	background: none;
	border: 0;
	border-radius: var(--buzz-radius-pill);
	color: var(--buzz-text-muted);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 16px;
	cursor: pointer;
}

.bz .bz-seg button:hover,
.bz .bz-seg label:hover {
	color: var(--buzz-text);
}

.bz .bz-seg button[aria-pressed="true"],
.bz .bz-seg button.is-on,
.bz .bz-seg input:checked + label {
	background: var(--buzz-green);
	color: var(--buzz-on-accent);
}

.bz .bz-seg input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.bz .bz-seg input:focus-visible + label {
	outline: 3px solid var(--buzz-focus-ring);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ tiles -- */

/* A row of big one-tap choices, each a picture over its word: the cancel
   page's rating faces. Buttons, so they take focus and read by their word. */
.bz .bz-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--buzz-space-3);
}

.bz .bz-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--buzz-space-2);
	min-width: 104px;
	padding: 14px 12px 12px;
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-md);
	color: var(--buzz-text-soft);
	font-family: var(--buzz-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}

.bz .bz-tile:hover {
	border-color: var(--buzz-green);
	color: var(--buzz-text);
}

.bz .bz-tile:focus-visible {
	outline: 3px solid var(--buzz-focus-ring);
	outline-offset: 2px;
}

.bz .bz-tile img {
	display: block;
	width: 64px;
	height: 64px;
}

/* ----------------------------------------------------------------- modals -- */

/* Bootstrap modals opened from a .bz page (the member form's switch package
   and gym dialogs): a raised panel, not globalbs4's black box with a square
   white border. */
.bz .modal-content {
	background: var(--buzz-surface-1);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-lg);
	color: var(--buzz-text);
}

.bz .modal-header,
.bz .modal-footer {
	border-color: var(--buzz-line);
}

.bz .modal-title {
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 18px;
}

.bz .modal-footer {
	gap: var(--buzz-space-2);
}

/* A record's field list (yii\widgets\DetailView): long values such as GUIDs,
   payment references and notes wrap inside their cell. */
.bz .detail-view td {
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- pagination -- */

/* GridView pagers (yii\bootstrap5\LinkPager) in the house style. The current
   page is filled green as well as carrying aria-current, and the pager's own
   numbers say which page it is, so the fill is never the only signal. */
.bz .pagination {
	--bs-pagination-color: var(--buzz-text);
	--bs-pagination-bg: var(--buzz-surface-2);
	--bs-pagination-border-color: var(--buzz-line);
	--bs-pagination-hover-color: var(--buzz-text);
	--bs-pagination-hover-bg: var(--buzz-surface-3);
	--bs-pagination-hover-border-color: var(--buzz-line-strong);
	--bs-pagination-focus-color: var(--buzz-text);
	--bs-pagination-focus-bg: var(--buzz-surface-3);
	--bs-pagination-focus-box-shadow: 0 0 0 3px var(--buzz-focus-ring);
	--bs-pagination-active-color: var(--buzz-on-accent);
	--bs-pagination-active-bg: var(--buzz-green);
	--bs-pagination-active-border-color: var(--buzz-green);
	--bs-pagination-disabled-color: var(--buzz-text-muted);
	--bs-pagination-disabled-bg: var(--buzz-surface-1);
	--bs-pagination-disabled-border-color: var(--buzz-line);
	--bs-pagination-border-radius: var(--buzz-radius-md);
	flex-wrap: wrap;
	margin: var(--buzz-space-4) 0 0;
}

.bz .page-item.active .page-link {
	font-weight: 700;
}

.bz .summary {
	color: var(--buzz-text-muted);
	font-size: 13px;
	margin-bottom: var(--buzz-space-2);
}

/* ---------------------------------------------------------- sidebar layout -- */

/* A narrow navigation column beside the page's main content (the WhatsApp
   inbox's folders); stacks above it below 992px. */
.bz .bz-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--buzz-space-5);
	align-items: start;
}

@media (min-width: 992px) {
	.bz .bz-sidebar-layout {
		grid-template-columns: 220px minmax(0, 1fr);
	}
}

/* A vertical list of places. The current one is marked with aria-current,
   and shows a green edge as well as a lighter fill. */
.bz .bz-sidenav ul {
	list-style: none;
	margin: 0 0 var(--buzz-space-4);
	padding: 0;
	display: grid;
	gap: 4px;
}

.bz .bz-sidenav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--buzz-space-2);
	padding: 10px 12px;
	border-radius: var(--buzz-radius-md);
	color: var(--buzz-text-soft);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.bz .bz-sidenav a:hover {
	background: var(--buzz-surface-2);
	color: var(--buzz-text);
}

.bz .bz-sidenav a[aria-current] {
	background: var(--buzz-surface-2);
	color: var(--buzz-text);
	box-shadow: inset 3px 0 0 var(--buzz-green);
}

.bz .bz-sidenav-actions {
	display: grid;
	gap: var(--buzz-space-2);
}

/* A small count beside a label (unread messages). The number is the signal;
   the green pill just makes it easy to spot. */
.bz .bz-count {
	background: var(--buzz-green);
	color: var(--buzz-on-accent);
	border-radius: var(--buzz-radius-pill);
	font-size: 12px;
	line-height: 1.5;
	min-width: 24px;
	padding: 0 8px;
	text-align: center;
}

/* ---------------------------------------------------------------- notices -- */

/* An aside with a coloured edge: information, a warning, or a stop. The edge
   colour is backed by the title's words, never left to say it alone. */
.bz .bz-notice {
	/* Raised a step, so a notice still stands out when it sits inside a
	   panel rather than on the page canvas. */
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-left: 3px solid var(--buzz-green);
	border-radius: var(--buzz-radius-md);
	color: var(--buzz-text-soft);
	font-size: 14px;
	padding: 14px 18px;
	margin-bottom: var(--buzz-space-4);
}

.bz .bz-notice--warn {
	border-left-color: var(--buzz-amber);
}

.bz .bz-notice--stop {
	border-left-color: var(--buzz-red);
	background: rgba(var(--buzz-red-rgb), 0.08);
}

.bz .bz-notice-title {
	display: flex;
	align-items: center;
	gap: var(--buzz-space-2);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--buzz-text);
	margin: 0 0 6px;
}

.bz .bz-notice ul {
	margin: var(--buzz-space-2) 0 0;
	padding-left: 18px;
}

.bz .bz-notice li {
	margin-bottom: 3px;
}

.bz .bz-notice p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ panel -- */

/* A plain content panel. Bootstrap's .card is re-themed to match below, so a
   page can use either. */
.bz .bz-panel {
	background: var(--buzz-surface-1);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-lg);
	padding: var(--buzz-space-5);
	margin-bottom: var(--buzz-space-4);
}

/* ------------------------------------------------------------------- page -- */

/* The content of a page that has moved to the 2026 look inside the portal
   layout: <div class="bz bz-page">. Sets the base type the legacy body does
   not (globalbs4 has body text at 0.8rem). Pages with a layout of their own set
   this on their own scope instead. */
.bz-page {
	font-family: var(--buzz-font-body);
	font-size: 14px;
	line-height: 1.5;
	color: var(--buzz-text);
	padding-bottom: var(--buzz-space-5);
}

/* Prose rhythm at zero specificity, so every component keeps its own margins. */
:where(.bz-page) :where(p) {
	margin: 0 0 12px;
}

:where(.bz-page) :where(p:last-child) {
	margin-bottom: 0;
}

/* Links in running text: green, so they read as links on the dark page.
   Anything with a class of its own (a button, a chip) is left alone. */
.bz-page a:not([class]) {
	color: var(--buzz-green);
}

.bz-page a:not([class]):hover {
	color: var(--buzz-green-bright);
}

/* A section heading inside a page: small spaced capitals, muted. */
.bz .bz-h2 {
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--buzz-text-muted);
	margin: 0 0 var(--buzz-space-3);
}

.bz .bz-section {
	margin-bottom: var(--buzz-space-6);
}

/* A single centred column for short forms: logging in, a PIN reminder. */
.bz .bz-narrow {
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------- hero -- */

/* A photo banner at the top of a page, the title over it. The picture comes
   in on --bz-hero-image (style="--bz-hero-image: url(…)") and sits under a
   dark gradient, so the words stay readable whatever the photo. */
.bz .bz-hero {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-lg);
	padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 48px);
	margin-bottom: var(--buzz-space-5);
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.78) 55%, rgba(0, 0, 0, 0.4) 100%),
		var(--bz-hero-image, none) center / cover no-repeat,
		var(--buzz-surface-1);
}

.bz .bz-hero .bz-title {
	font-size: clamp(36px, 6vw, 64px);
}

.bz .bz-hero .bz-lead {
	color: var(--buzz-text);
	max-width: 52ch;
	margin-bottom: 0;
}

/* ------------------------------------------------------------------- grid -- */

/* Cards or panels side by side, as many columns as fit. --bz-min sets how
   narrow a column may get before the grid drops one. */
.bz .bz-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--bz-min, 300px), 100%), 1fr));
	gap: var(--buzz-space-4);
	align-items: start;
}

.bz .bz-grid > .card,
.bz .bz-grid > .bz-panel {
	/* !important only to outrank an mb-* utility a shared partial brings with
	   it (the profile photo card has mb-4 for the pages it sits on alone). */
	margin-bottom: 0 !important;
}

/* Two independent columns, each a .bz-stack of cards, side by side from
   tablet width up. Unlike .bz-grid the columns do not share row heights, so a
   long card on one side never leaves a hole on the other. */
.bz .bz-columns {
	display: grid;
	gap: var(--buzz-space-4);
	align-items: start;
}

@media (min-width: 768px) {
	.bz .bz-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Cards or panels one under another, full width, evenly spaced. The column
   is minmax(0, 1fr), not the default auto: an auto track will not shrink
   below its widest unbreakable word, so one long GUID in a member's notes
   pushed the whole column off the page. */
.bz .bz-stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--buzz-space-4);
}

.bz .bz-stack > .card,
.bz .bz-stack > .bz-panel {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------ stats -- */

/* A row of headline numbers, each with its label under it. */
.bz .bz-stats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--buzz-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bz .bz-stat {
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-radius: var(--buzz-radius-md);
	padding: 12px 14px;
}

.bz .bz-stat-value {
	display: block;
	font-family: var(--buzz-font-display);
	font-style: italic;
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	color: var(--buzz-text);
	margin-bottom: 6px;
}

.bz .bz-stat-label {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: var(--buzz-text-muted);
}

/* A second line under the label: last month's figure, the student share. */
.bz .bz-stat-meta {
	display: block;
	font-size: 12px;
	line-height: 1.35;
	color: var(--buzz-text-dim);
	margin-top: 4px;
}

.bz .bz-stat .bz-tag {
	margin-top: 8px;
}

/* ------------------------------------------------------------------ links -- */

/* A list of links to other screens, laid out in as many columns as fit. For
   the staff menus that used to be one long line of "a / b / c". */
.bz .bz-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 2px var(--buzz-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bz .bz-links + .bz-links {
	margin-top: var(--buzz-space-3);
	padding-top: var(--buzz-space-3);
	border-top: 1px solid var(--buzz-line-soft);
}

.bz .bz-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--buzz-space-2);
	padding: 7px 10px;
	margin: 0 -10px;
	border-radius: var(--buzz-radius-sm);
	color: var(--buzz-text-soft);
	text-decoration: none;
}

/* The chevron is drawn, not typed, so it takes the link's colour. */
.bz .bz-links a::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.5;
}

.bz .bz-links a:hover {
	background: var(--buzz-surface-2);
	color: var(--buzz-green);
}

/* ------------------------------------------------------------------ media -- */

/* An image beside its text, such as a QR code with its instructions. */
.bz .bz-media {
	display: flex;
	align-items: center;
	gap: var(--buzz-space-4);
}

.bz .bz-media > img {
	flex: 0 0 auto;
	border-radius: var(--buzz-radius-sm);
}

/* -------------------------------------------------------------------- bar -- */

/* A proportional bar beside a figure in a table (views/stats/_breakdown.php).
   The number and percentage are always printed next to it; the bar only
   makes the biggest rows easy to spot. */
.bz .bz-bar {
	display: block;
	min-width: 80px;
	height: 8px;
	border-radius: var(--buzz-radius-pill);
	background: var(--buzz-surface-3);
	overflow: hidden;
}

.bz .bz-bar > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--buzz-chart-1);
}

/* ------------------------------------------------------------------- tags -- */

/* A small status label. Always words, and a glyph where the state matters: the
   colour is never the only thing saying it. */
.bz .bz-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--buzz-line-strong);
	border-radius: var(--buzz-radius-pill);
	color: var(--buzz-text-soft);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 2px 9px;
}

.bz .bz-tag--ok {
	border-color: var(--buzz-green);
	color: var(--buzz-green);
}

.bz .bz-tag--warn {
	border-color: var(--buzz-amber);
	color: var(--buzz-amber-text);
}

.bz .bz-tag--stop {
	border-color: var(--buzz-red);
	color: var(--buzz-red-text);
}

/* ------------------------------------------------------------------- rows -- */

/* A list of things, one per row, each with an optional coloured stripe down
   its left edge (set --bz-stripe on the row). Used for today's classes. */
.bz .bz-rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bz .bz-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--buzz-space-2) var(--buzz-space-4);
	background: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line);
	border-left: 4px solid var(--bz-stripe, var(--buzz-line-strong));
	border-radius: var(--buzz-radius-sm);
	padding: 10px 14px;
	margin-bottom: 6px;
}

.bz .bz-row-title {
	display: block;
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 14px;
	color: var(--buzz-text);
}

.bz .bz-row-meta {
	display: block;
	font-size: 12px;
	color: var(--buzz-text-muted);
}

.bz .bz-row-side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--buzz-space-2);
}

/* A row that no longer applies (a cancelled class): dimmed and struck through,
   and it carries a tag saying why. */
.bz .bz-row.is-off {
	opacity: 0.6;
}

.bz .bz-row.is-off .bz-row-title {
	text-decoration: line-through;
}

/* =================================================== Bootstrap re-theme ==
 *
 * Yii's widgets emit Bootstrap markup, and on a .bz page it should look like
 * Buzz without anyone hand-writing bz- classes into it. Most of Bootstrap 5.3
 * reads its colours from --bs-* variables, which are re-pointed here; the
 * portal's dark build (Bootswatch Darkly) also bakes some values in directly —
 * white form fields, a blue focus glow, blue and teal buttons — and those get
 * explicit rules. Legacy globalbs4 rules that use !important are matched with
 * !important, and only those.
 */

.bz {
	--bs-body-bg: var(--buzz-surface-0);
	--bs-body-color: var(--buzz-text);
	--bs-emphasis-color: var(--buzz-text);
	--bs-secondary-color: var(--buzz-text-muted);
	--bs-border-color: var(--buzz-line);
	--bs-border-color-translucent: var(--buzz-line);
	--bs-border-radius: var(--buzz-radius-md);
	--bs-link-color: var(--buzz-green);
	--bs-link-color-rgb: var(--buzz-green-rgb);
	--bs-link-hover-color: var(--buzz-green-bright);
	--bs-link-hover-color-rgb: 143, 212, 28;
	--bs-primary: var(--buzz-green);
	--bs-primary-rgb: var(--buzz-green-rgb);
	--bs-success: var(--buzz-green);
	--bs-success-rgb: var(--buzz-green-rgb);
	--bs-danger: var(--buzz-red);
	--bs-danger-rgb: var(--buzz-red-rgb);
	--bs-warning: var(--buzz-amber);
	--bs-warning-rgb: var(--buzz-amber-rgb);
	--bs-form-invalid-color: var(--buzz-red-text);
	--bs-form-invalid-border-color: var(--buzz-red-text);
}

/* -- form fields ----------------------------------------------------------- */

/* .bz-input is the same field for an <input> that is not part of a Yii form,
   such as a search box. */

.bz .form-control,
.bz .form-select,
.bz .bz-input {
	width: 100%;
	background-color: var(--buzz-surface-2);
	border: 1px solid var(--buzz-line-strong);
	border-radius: var(--buzz-radius-md);
	color: var(--buzz-text);
	font-size: 16px;
	padding: 12px 14px;
	height: auto;
	/* The browser's own parts of a field (a date input's calendar icon and
	   pop-up, a select's option list) follow the field's scheme, not ours:
	   without this the calendar icon is dark grey on a dark field. Set on the
	   fields only, not on .bz: a scheme on the page would change how the card
	   payment iframes inside some .bz pages paint their background. */
	color-scheme: dark;
}

/* The dark build draws the dropdown arrow in near-black for a white field. */
.bz .form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	padding-right: 40px;
}

/* A dropdown that only carries .form-control, as GridView's filter row draws
   them: give it the same arrow as .form-select, so every list filter reads as
   a dropdown without each grid having to set filterInputOptions. */
.bz select.form-control:not([multiple]) {
	appearance: none;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 12px;
	padding-right: 40px;
}

.bz .form-control::placeholder,
.bz .bz-input::placeholder {
	color: var(--buzz-text-dim);
}

.bz .form-control:focus,
.bz .form-select:focus,
.bz .bz-input:focus {
	background-color: var(--buzz-surface-2);
	border-color: var(--buzz-green);
	box-shadow: 0 0 0 3px rgba(var(--buzz-green-rgb), 0.25);
	color: var(--buzz-text);
}

/* The field's own green glow is the focus cue; a white ring on top of it would
   be two. */
.bz .form-control:focus-visible,
.bz .form-select:focus-visible,
.bz .bz-input:focus-visible {
	outline: none;
}

/* The "Choose file" button inside a file field, in the house style rather
   than the browser's own grey. */
.bz .form-control::file-selector-button {
	background-color: var(--buzz-surface-3);
	border-color: var(--buzz-line-strong);
	color: var(--buzz-text);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bz .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
	background-color: var(--buzz-surface-3);
	color: var(--buzz-green);
}

.bz .form-control:disabled,
.bz .form-control[readonly] {
	background-color: var(--buzz-surface-1);
	color: var(--buzz-text-muted);
}

/* Labels. .control-label and .help-block are what the older, plain
   yii\widgets\ActiveForm emits; kept so a page can move to the new look before
   its form moves to the Bootstrap 5 widget. */
.bz .form-label,
.bz .control-label,
.bz .bz-label {
	display: block;
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--buzz-text);
	margin-bottom: 6px;
}

.bz .form-text,
.bz .help-block,
.bz .bz-help {
	display: block;
	color: var(--buzz-text-muted);
	font-size: 13px;
	line-height: 1.45;
	margin: 6px 0 0;
}

.bz .invalid-feedback,
.bz .help-block-error {
	color: var(--buzz-red-text);
	font-size: 13px;
}

.bz .is-invalid,
.bz .has-error .form-control {
	border-color: var(--buzz-red-text) !important;
}

.bz .form-group {
	margin-bottom: var(--buzz-space-4);
}

/* Yii marks a required field by putting .required on the wrapper; the asterisk
   is generated, not written in any template, which is why it is styled here
   rather than hunted for in the views. */
.bz .required > label::after,
.bz .required > .control-label::after {
	content: " *";
	color: var(--buzz-green);
}

/* The legacy global.css stars every label inside a required field
   (div.required label:after), which put a red star in each chip of a
   required radio list. Only the field's own label gets one. */
.bz .required .bz-chips label::after,
.bz .required .form-check label::after {
	content: none;
}

/* Tick boxes and radios.
 *
 * Bootstrap lays .form-check out as a float with 1.5em of left padding on the
 * wrapper and a matching negative margin on the input, arithmetic that only
 * holds while the box is the 1em it ships at. Ours is bigger, so the label's
 * first line sat above the tick and wrapped lines hung at different indents.
 * Flex takes the arithmetic out: box and label are two items in a row, top
 * aligned, and the wrap indent is whatever the gap says. */
.bz .form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--buzz-space-3);
	padding-left: 0;
	min-height: 0;
}

/* Radio and checkbox lists laid out in a row (ActiveField::inline()). */
.bz .form-check-inline {
	display: inline-flex;
	margin-right: var(--buzz-space-5);
	margin-bottom: var(--buzz-space-2);
}

.bz .form-check-input {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 0;
	background-color: var(--buzz-surface-2);
	border: 2px solid var(--buzz-line-strong) !important;
}

.bz .form-check-input:checked {
	background-color: var(--buzz-green);
	border-color: var(--buzz-green) !important;
}

.bz .form-check-input:focus {
	border-color: var(--buzz-green) !important;
	box-shadow: 0 0 0 3px rgba(var(--buzz-green-rgb), 0.25);
}

.bz .form-check-label {
	font-family: var(--buzz-font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: var(--buzz-text);
	padding-left: 0;
}

/* -- buttons --------------------------------------------------------------- */

/* Bootstrap buttons take the .bz-btn shape, and the green ones its colours.
   .btn-buzz is the legacy portal button: on a .bz page it becomes the new one,
   so a view can move over before anyone rewrites its buttons. */
.bz .btn:not(.btn-link) {
	--bs-btn-font-family: var(--buzz-font-heading);
	--bs-btn-font-weight: 700;
	--bs-btn-font-size: 12px;
	--bs-btn-padding-x: 22px;
	--bs-btn-padding-y: 11px;
	--bs-btn-border-width: 2px;
	--bs-btn-border-radius: var(--buzz-radius-pill);
	--bs-btn-focus-box-shadow: none;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.bz .btn-sm:not(.btn-link) {
	--bs-btn-font-size: 11px;
	--bs-btn-padding-x: 15px;
	--bs-btn-padding-y: 7px;
}

.bz .btn-lg:not(.btn-link) {
	--bs-btn-font-size: 14px;
	--bs-btn-padding-x: 26px;
	--bs-btn-padding-y: 15px;
}

.bz .btn-primary,
.bz .btn-success,
.bz .btn-buzz {
	--bs-btn-color: var(--buzz-on-accent);
	--bs-btn-bg: var(--buzz-green);
	--bs-btn-border-color: var(--buzz-green);
	--bs-btn-hover-color: var(--buzz-on-accent);
	--bs-btn-hover-bg: var(--buzz-green-bright);
	--bs-btn-hover-border-color: var(--buzz-green-bright);
	--bs-btn-active-color: var(--buzz-on-accent);
	--bs-btn-active-bg: var(--buzz-green-bright);
	--bs-btn-active-border-color: var(--buzz-green-bright);
	--bs-btn-disabled-color: var(--buzz-on-accent);
	--bs-btn-disabled-bg: var(--buzz-green);
	--bs-btn-disabled-border-color: var(--buzz-green);
}

.bz .btn-secondary,
.bz .btn-outline-secondary,
.bz .btn-outline-primary,
.bz .btn-outline-success {
	--bs-btn-color: var(--buzz-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--buzz-line-strong);
	--bs-btn-hover-color: var(--buzz-green);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--buzz-green);
	--bs-btn-active-color: var(--buzz-green);
	--bs-btn-active-bg: transparent;
	--bs-btn-active-border-color: var(--buzz-green);
}

.bz .btn-danger,
.bz .btn-outline-danger {
	--bs-btn-color: var(--buzz-red-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--buzz-red);
	--bs-btn-hover-color: var(--buzz-on-accent);
	--bs-btn-hover-bg: var(--buzz-red);
	--bs-btn-hover-border-color: var(--buzz-red);
	--bs-btn-active-color: var(--buzz-on-accent);
	--bs-btn-active-bg: var(--buzz-red);
	--bs-btn-active-border-color: var(--buzz-red);
}

/* globalbs4 sets .btn-buzz's label, radius, font and padding with !important
   or the font shorthand, so the Bootstrap variables alone cannot reach it. */
.bz .btn-buzz {
	color: var(--bs-btn-color) !important;
	border-radius: var(--buzz-radius-pill) !important;
	font: 700 12px/1.2 var(--buzz-font-heading);
	letter-spacing: 0.08em;
	padding: 11px 22px;
}

.bz .btn-buzz:hover {
	background-color: var(--bs-btn-hover-bg);
	color: var(--bs-btn-hover-color) !important;
}

/* -- cards ----------------------------------------------------------------- */

/* .card and the portal's .card-buzz become a dark panel with a green top edge,
   instead of a green outline round a solid green header bar with white type
   (about 2.5:1 — too faint to read comfortably). */
.bz .card {
	--bs-card-bg: var(--buzz-surface-1);
	--bs-card-color: var(--buzz-text);
	--bs-card-border-color: var(--buzz-line);
	--bs-card-border-radius: var(--buzz-radius-lg);
	--bs-card-inner-border-radius: calc(var(--buzz-radius-lg) - 1px);
	--bs-card-cap-bg: transparent;
	--bs-card-cap-color: var(--buzz-text);
	--bs-card-cap-padding-x: var(--buzz-space-4);
	--bs-card-cap-padding-y: var(--buzz-space-3);
	--bs-card-spacer-x: var(--buzz-space-4);
	--bs-card-spacer-y: var(--buzz-space-4);
	background-color: var(--bs-card-bg);
}

.bz .card-buzz,
.bz .card-offer {
	border-color: var(--buzz-line);
	border-top: 3px solid var(--buzz-green);
	border-radius: var(--buzz-radius-lg) !important;
}

.bz .card > .card-header,
.bz .card-buzz > .card-header {
	background: transparent;
	border-bottom: 1px solid var(--buzz-line);
	border-radius: 0 !important;
	color: var(--buzz-text);
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: left;
	padding: var(--buzz-space-3) var(--buzz-space-4);
}

/* -- tables ---------------------------------------------------------------- */

.bz .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--buzz-text);
	--bs-table-border-color: var(--buzz-line);
	--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
	--bs-table-hover-bg: var(--buzz-surface-2);
}

.bz .table > thead th {
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--buzz-text-muted);
}

/* GridView's sortable headings are links. They stay heading-coloured rather
   than taking the green of links in running text, and the column that is
   sorted says which way with an arrow as well as the green. */
.bz .table > thead a {
	color: inherit;
	text-decoration: none;
}

.bz .table > thead a:hover,
.bz .table > thead a.asc,
.bz .table > thead a.desc {
	color: var(--buzz-green);
}

.bz .table > thead a.asc::after {
	content: " \2191";
}

.bz .table > thead a.desc::after {
	content: " \2193";
}

/* -- alerts (Yii flash messages) ------------------------------------------- */

/*
 * Flashes take the notice shape: a dark panel with a coloured edge and an icon.
 * The icon's SHAPE differs by type — a tick, an "i", a warning triangle, a
 * cross — so the type never rests on the edge colour alone. The layout puts
 * its breadcrumbs and flashes inside .bz, so this reaches every portal page,
 * moved over or not.
 */
.bz .alert {
	--bs-alert-bg: var(--buzz-surface-1);
	--bs-alert-color: var(--buzz-text-soft);
	--bs-alert-border-color: var(--buzz-line);
	--bs-alert-border-radius: var(--buzz-radius-md);
	--bz-alert-colour: var(--buzz-text-muted);
	--bz-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E");
	position: relative;
	/* Set directly as well as through --bs-alert-bg: the portal's dark build
	   gives each .alert-* a solid background-color of its own. */
	background-color: var(--bs-alert-bg);
	border: 1px solid var(--buzz-line);
	border-left: 3px solid var(--bz-alert-colour);
	color: var(--bs-alert-color);
	font-size: 14px;
	padding: 12px 16px 12px 46px;
}

.bz .alert::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 13px;
	width: 19px;
	height: 19px;
	background: var(--bz-alert-colour);
	-webkit-mask: var(--bz-alert-icon) center / contain no-repeat;
	mask: var(--bz-alert-icon) center / contain no-repeat;
}

.bz .alert-success { --bz-alert-colour: var(--buzz-green); --bz-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M7.5 12.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
.bz .alert-info    { --bz-alert-colour: var(--buzz-cyan); --bz-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.bz .alert-warning { --bz-alert-colour: var(--buzz-amber); --bz-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19Z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.5'/%3E%3C/svg%3E"); }
.bz .alert-danger  { --bz-alert-colour: var(--buzz-red); --bz-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8.5 8.5l7 7M15.5 8.5l-7 7'/%3E%3C/svg%3E"); background: rgba(var(--buzz-red-rgb), 0.08); }

/* Flash bodies are HTML built in the controllers, often a heading and a
   paragraph. */
.bz .alert h1,
.bz .alert h2,
.bz .alert h3,
.bz .alert h4 {
	font-family: var(--buzz-font-heading);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--buzz-text);
	margin: 0 0 4px;
}

.bz .alert > :last-child {
	margin-bottom: 0;
}

/* Some older markup brings its own icon as the alert's first child; the icon
   drawn above replaces it rather than sitting beside it. */
.bz .alert > .bi:first-child {
	display: none;
}

.bz .alert a:not([class]),
.bz .alert .alert-link {
	color: var(--buzz-green);
	font-weight: 700;
}

.bz .alert a:not([class]):hover,
.bz .alert .alert-link:hover {
	color: var(--buzz-green-bright);
}

/* -- breadcrumbs ----------------------------------------------------------- */

.bz .breadcrumb {
	--bs-breadcrumb-divider-color: var(--buzz-text-dim);
	--bs-breadcrumb-item-active-color: var(--buzz-text-soft);
	background: transparent;
	padding: 0;
	margin-bottom: 0;
	font-size: 13px;
}

.bz .breadcrumb a {
	color: var(--buzz-green);
	text-decoration: none;
}

.bz .breadcrumb a:hover {
	color: var(--buzz-green-bright);
	text-decoration: underline;
}