/**
 * The personal area. Figma 609:8806.
 *
 * In the plugin, not the theme, for the reason CLAUDE.md gives: personal-area
 * logic does not go in a theme, and the screen that shows it travels with it.
 *
 * Colours come from --wp--preset--* with a literal fallback and never from
 * --gboneai-*, which exist only while GBOneAI is active. Same rule as gb-events.
 *
 * Measured from the file:
 *   band 1400 (260..1660) — a 1040 column beside a 323 menu, the officers layout
 *   menu items 50 high, radius 50, #1043FF, current #FCAC0B, Regular 20 white
 *   panels #F3F3F5, radius 20, padding 54/100, inner column 840
 *   panel headings Bold 28 #1B2B50; page heading Bold 36
 *   field labels Light 18 #1B2B50; inputs 46 high, radius 25
 */

/* 38, not 54: `609:8806` puts the heading and the side menu at y295 and the
   navy band above them ends at 257. It had been sixteen too many. */
.gb-area {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	padding-block: 38px 90px;

	--gb-area-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-area-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-area-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-area-grey: var(--wp--preset--color--surface, #f3f3f5);
	--gb-area-dark-grey: var(--wp--preset--color--dark-grey, #ddd);
	--gb-area-teal: var(--wp--preset--color--turquoise, #1fa9ab);
	--gb-area-blue-grey: var(--wp--preset--color--blue-grey, #cad9dc);
	--gb-area-white: var(--wp--preset--color--white, #fff);
}

/*
 * 1040 + 323 with the gap the band leaves over: 1400 - 1040 - 323 = 37. The
 * menu is first in source order so RTL puts it at the inline end without any
 * rule naming a side — the same reason the lecture card puts its photo first.
 */
.gb-area__layout {
	display: grid;
	grid-template-columns: 323px minmax(0, 1040px);
	gap: 37px;
	align-items: start;
}

/* ------------------------------------------------------------------ menu --- */

.gb-area__menu ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gb-area__tab {
	display: flex;
	block-size: 50px;
	align-items: center;
	justify-content: center;
	padding-inline: 20px;
	border-radius: 50px;
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background 0.2s ease;
}

.gb-area__tab:hover,
.gb-area__tab:focus-visible {
	background: var(--gb-area-navy, #1b2b50);
	color: var(--gb-area-white, #fff);
}

/* `609:9158` — the current tab is amber, not blue. */
.gb-area__tab.is-current {
	background: var(--gb-area-amber, #fcac0b);
}

/* ---------------------------------------------------------------- panels --- */

.gb-area__heading {
	margin-block: 0 30px;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: start;
}

.gb-area__panel {
	margin-block-end: 30px;
	padding: 54px 100px;
	border-radius: 20px;
	background: var(--gb-area-grey, #f3f3f5);
}

.gb-area__panel-title {
	margin-block: 0 30px;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: start;
}

/* --------------------------------------------------------- licence strip --- */

/*
 * §1.7 item 15 — "אזור הרישיון שלך פעיל עד ____". The same grey panel as the
 * four below it, because it is a sibling on the page and Gil asked for it to
 * read as one. What differs is that nothing in it is a form: this is the only
 * place on the screen where a value is stated rather than offered, so it gets a
 * badge and a rule and no inputs.
 *
 * FOUR STATES, ALL FROM THE PROJECT PALETTE. There is no red in this design
 * system, and inventing one for "not valid" would be a colour the designer never
 * chose. The seriousness runs turquoise -> amber -> navy instead; navy is the
 * darkest thing on the page and carries the weight without leaving the file.
 */
.gb-area__licence {
	border-inline-start: 6px solid var(--gb-area-blue-grey, #cad9dc);
}

.gb-area__licence.is-valid {
	border-inline-start-color: var(--gb-area-teal, #1fa9ab);
}

.gb-area__licence.is-expired {
	border-inline-start-color: var(--gb-area-amber, #fcac0b);
}

.gb-area__licence.is-invalid {
	border-inline-start-color: var(--gb-area-navy, #1b2b50);
}

.gb-area__licence .gb-area__panel-title {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	margin-block-end: 20px;
}

.gb-area__licence-badge {
	padding: 4px 16px;
	border-radius: 25px;
	background: var(--gb-area-blue-grey, #cad9dc);
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
}

.gb-area__licence.is-valid .gb-area__licence-badge {
	background: var(--gb-area-teal, #1fa9ab);
	color: var(--gb-area-white, #fff);
}

.gb-area__licence.is-expired .gb-area__licence-badge {
	background: var(--gb-area-amber, #fcac0b);
}

.gb-area__licence.is-invalid .gb-area__licence-badge {
	background: var(--gb-area-navy, #1b2b50);
	color: var(--gb-area-white, #fff);
}

.gb-area__licence-line {
	margin-block: 0;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
}

.gb-area__licence-number,
.gb-area__licence-note {
	margin-block: 10px 0;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.125rem;
	line-height: 1.6;
}

.gb-area__licence-note {
	opacity: 0.75;
}

/*
 * `isolate`, not `embed`. A Latin address at the end of a Hebrew sentence pulls
 * the full stop across it - the line renders as ".dev@example.com" with the stop
 * on the wrong side. Isolation keeps the neutral characters on either side with
 * the run they belong to, which `embed` does not.
 */
.gb-area__licence-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin-block: 6px 0;
}

/*
 * `inline-block` with block padding, because an 18px link in a paragraph is a
 * 20px tap target and the harness is right to fail it. `direction: ltr` with
 * `unicode-bidi: isolate` keeps a Latin address from dragging neighbouring
 * punctuation across it - `embed` does not isolate, which is the whole
 * difference between the two.
 */
.gb-area__licence-contact a {
	display: inline-block;
	direction: ltr;
	unicode-bidi: isolate;
	padding-block: 6px;
	color: var(--gb-area-blue, #1043ff);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}

/*
 * SIX columns, not three, so one grid can express both shapes the panel needs:
 * a text field is a third (span 2) and an upload is a half (span 3). Three
 * columns cannot — two uploads side by side would each need 1.5 of them, and
 * `span 1.5` is not a thing.
 *
 * THE TWO GAPS ARE NOT THE SAME NUMBER, and one `gap` for both got the width
 * wrong. `909:7587` puts the three fields of a row at x0/285/570 across 840 —
 * 270 wide, 15 apart — and the rows themselves at y0/91/182, which is 71 tall
 * and 20 apart. A single `gap: 20px` left six columns of 123.33 and a field of
 * 266.67. At `column-gap: 15px` a field is 255 + 15 = 270 exactly.
 */
.gb-area__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	row-gap: 20px;
	column-gap: 15px;
}

/* A text field is a third of the 840 the drawing gives the panel; the textareas
   take the whole row, because a paragraph in a third of 840 is four words a line. */
.gb-area__field {
	grid-column: span 2;
	margin: 0;
}

.gb-area__field--wide {
	grid-column: 1 / -1;
}

/* Half a row: `909:8270`'s first two rows, and the family block of `909:8865`. */
.gb-area__field--half {
	grid-column: span 3;
}

/* An empty third, so the row after it starts fresh. See `618:6277`. */
.gb-area__field--spacer {
	grid-column: span 2;
}

/* -------------------------------------------------------------- uploads --- */

/*
 * `623:6788` and `623:6796` — a 146 round preview beside the two hint lines and
 * the button. Two of them share the panel's first row, which is why they take a
 * column and a half each rather than the thirds the text fields use.
 */
.gb-area__field--image {
	grid-column: span 3;
}

.gb-area__upload {
	display: flex;
	gap: 20px;
	align-items: center;
}

/* 146 square and round — it holds a logo strip as often as a portrait, so the
   image is contained rather than cropped to fill. */
.gb-area__preview {
	display: flex;
	flex: 0 0 auto;
	inline-size: 146px;
	block-size: 146px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: var(--gb-area-white, #fff);
}

.gb-area__preview img {
	max-inline-size: 100%;
	max-block-size: 100%;
	object-fit: contain;
}

/*
 * THE CIRCLE IS DRAWN EVEN WITH NOTHING IN IT. `622:6625` fills each preview
 * with placeholder art — a silhouette for the portrait, a mark for the logo —
 * so a member sees what the upload is for before uploading anything. Neither
 * asset has been supplied, so this is a plain disc in the panel's own grey:
 * the shape and the position are the drawing's, the artwork is outstanding.
 */
.gb-area__preview-empty {
	inline-size: 100%;
	block-size: 100%;
	border-radius: 50%;
	background: var(--gb-area-dark-grey, #ddd);
}

.gb-area__upload-body {
	display: flex;
	min-inline-size: 0;
	flex-direction: column;
	gap: 6px;
}

.gb-area__hint {
	color: var(--gb-area-navy, #1b2b50);
	font-size: 0.875rem;
	font-weight: 100;
	line-height: 1.3;
	opacity: 0.8;
}

/*
 * The input is hidden but NOT `display: none`, which would take it out of the
 * tab order and off screen readers. Clipped to a pixel is the standard way to
 * keep a control focusable while its `label` does the showing.
 *
 * WRITTEN AS `.gb-area__field input.gb-area__file` and not as the class alone.
 * `.gb-area__field input` below is (0,1,1) and sets `inline-size: 100%` with a
 * 46 height; a bare `.gb-area__file` is (0,1,0), loses, and the "hidden" input
 * renders 1920 wide — which is exactly what it did, pushing the page to a 3236
 * scrollWidth. Same trap as the upload button two rules down.
 */
.gb-area__field input.gb-area__file {
	position: absolute;
	overflow: hidden;
	clip-path: inset(50%);
	inline-size: 1px;
	block-size: 1px;
	white-space: nowrap;
}

/*
 * The label is the button — smaller than the panel's submit, as drawn.
 *
 * Scoped inside `.gb-area__field` on purpose: `.gb-area__field label` is (0,1,1)
 * and would otherwise win on specificity and set this back to a block of Light
 * 18 text. Two classes beat a class and an element.
 */
.gb-area__field .gb-area__button--upload {
	display: inline-flex;
	align-self: flex-start;
	min-inline-size: 0;
	block-size: 40px;
	margin-block-start: 4px;
	font-size: 1rem;
}

/*
 * THE LICENCE UPLOAD IS A FIELD, NOT A BUTTON. `618:6371` draws it as the same
 * white 270 x 46 pill as the two inputs beside it, holding `העלאת קובץ` and a
 * tray-and-arrow glyph — where this had been rendering the shared 116 x 40 solid
 * blue button, which read as an action sitting loose in the middle of a form row.
 *
 * The avatar pair above keeps the blue button: `622:6625` draws THEM that way.
 */
.gb-area__field .gb-area__button--file {
	display: flex;
	inline-size: 100%;
	block-size: 46px;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-block-start: 0;
	padding-inline: 20px;
	border-radius: 25px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.125rem;
	font-weight: 400;
}

/*
 * Hover stays a white pill. It was grey, which is the panel the pill sits on,
 * and the generic `.gb-area__button:hover` turned the text white - so on hover
 * the control all but vanished (Gil, 28/09). The colour is set here explicitly
 * for that reason, and the ring is the fields' own focus blue.
 */
.gb-area__field .gb-area__button--file:hover,
.gb-area__file:focus-visible + .gb-area__button--file {
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-blue, #1043ff);
	box-shadow: inset 0 0 0 1px var(--gb-area-blue, #1043ff);
}

.gb-area__button--file svg {
	flex: 0 0 auto;
}

/* The upload row is the pill itself; the hint sits under it, as drawn. */
.gb-area__field--file .gb-area__upload,
.gb-area__field--file .gb-area__upload-body {
	display: block;
}

/* The focus ring belongs on the label, because that is what the eye follows when
   the input it points at cannot be seen. */
.gb-area__file:focus-visible + .gb-area__button--upload {
	outline: 2px solid var(--gb-area-navy, #1b2b50);
	outline-offset: 2px;
}

/*
 * 18 at Light — the same call, and the same reason, as the event registration
 * form: the family ships Regular and Bold, CSS font matching walks DOWN from the
 * requested weight first, so 100 renders Regular today and picks up a Light face
 * the day one is added. See CLAUDE.md, Design system.
 *
 * 3px BELOW IT, not 7. The drawn field is 71 tall in total (`909:8021`: label
 * text at y3 h18, `Rectangle 28` at y25 h46) and the label's own 1.2 line box
 * is 21.6 — so 21.6 + 3 + 46 lands on 70.6 where 7 gave 74.6. Four pixels per
 * field, but the rows stack: three of them drifted the panel by eleven.
 */
.gb-area__field label {
	display: block;
	margin-block-end: 3px;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.125rem;
	font-weight: 100;
	line-height: 1.2;
}

/* Printed BEFORE the label text since 27/09 (G4), flush against it: `*שם פרטי`. */
.gb-area__required {
	margin-inline-end: 0;
}

.gb-area__field input,
.gb-area__field textarea {
	box-sizing: border-box;
	inline-size: 100%;
	padding-inline: 20px;
	border: 0;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font: inherit;
	font-size: 1.125rem;
}

/* 46 high at radius 25, the same pill the archive filter's select uses. */
.gb-area__field input {
	block-size: 46px;
	border-radius: 25px;
}

/* An address, number or link runs left to right (`dir="ltr"` from the renderer)
   but sits flush right like every other value, as drawn. `right`, not `end`:
   the input's own direction is ltr, so `end` would be the left edge. */
.gb-area__field input[dir="ltr"] {
	text-align: right;
}

/*
 * A MULTIPLE SELECT IN A NORMAL CELL IS STILL A 46 PILL. It scrolls rather than
 * growing, because the drawing puts `תחום התמחות` in a third of a row beside two
 * ordinary fields and a four-row list box there would set the height of all three.
 *
 * A native `select multiple` is not what `609:8806` draws either — the drawing
 * shows a closed chooser. A real multi-choice control is recorded in
 * `docs/open-items.md` and waits on the list itself, which §16 has never supplied.
 */
.gb-area__field:not(.gb-area__field--wide) select[multiple] {
	block-size: 46px;
}

/*
 * THE DRAWN CHOOSER, built by multichoice.js over the select above (29/09).
 * Closed it is the same 46 white pill as its neighbours, the chevron at the end;
 * open, a white list of ticks floats under it, so the row's height never moves.
 */
.gb-multi {
	position: relative;
}

.gb-multi__toggle {
	position: relative;
	display: flex;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 46px;
	align-items: center;
	padding-inline: 20px 44px;
	border: 0;
	border-radius: 25px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	cursor: pointer;
	font: inherit;
	font-size: 1.125rem;
	text-align: start;
}

.gb-multi__text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gb-multi__toggle::after {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 21px;
	inline-size: 9px;
	block-size: 4px;
	background-color: currentColor;
	content: "";
	transform: translateY(-50%);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 4'%3E%3Cpath d='M.6.4 4.5 3.6 8.4.4' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gb-multi__toggle[aria-expanded="true"]::after {
	transform: translateY(-50%) rotate(180deg);
}

.gb-multi__toggle:focus-visible {
	outline: 2px solid var(--gb-area-blue, #1043ff);
	outline-offset: 2px;
}

.gb-multi__panel {
	position: absolute;
	z-index: 20;
	inset-block-start: calc(100% + 6px);
	inset-inline: 0;
	margin: 0;
	padding: 8px;
	border-radius: 20px;
	background: var(--gb-area-white, #fff);
	box-shadow: 0 0 20px 3px rgb(0 0 0 / 10%);
	list-style: none;
}

.gb-multi__panel[hidden],
/* The select stays in the form to submit; `.gb-area__field select` gives it a
   display that would otherwise beat its `hidden`. */
.gb-multi select[hidden] {
	display: none;
}

.gb-multi__panel label {
	display: flex;
	gap: 10px;
	align-items: center;
	min-block-size: 40px;
	padding-inline: 12px;
	border-radius: 12px;
	color: var(--gb-area-navy, #1b2b50);
	cursor: pointer;
	font-size: 1.125rem;
}

.gb-multi__panel label:hover {
	background: var(--gb-area-grey, #f3f3f5);
}

.gb-multi__panel input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	accent-color: var(--gb-area-blue, #1043ff);
}

/* 120, between the drawn 119 and 122 — `rows="4"` was rendering 136. */
.gb-area__field textarea {
	block-size: 120px;
	padding-block: 14px;
	border-radius: 20px;
	line-height: 1.5;
	resize: vertical;
}

.gb-area__field input:focus-visible,
.gb-area__field textarea:focus-visible {
	outline: 2px solid var(--gb-area-blue, #1043ff);
	outline-offset: 2px;
}

/*
 * `.gb-area__field input.gb-area__radio-input`, TWO CLASSES AND AN ELEMENT.
 *
 * `.gb-area__field input` further up is (0,1,1) and gives every input
 * `inline-size: 100%` and a 46 height. The radios had no rule that could beat
 * it, so each circle rendered 46 tall and up to 61 wide, its label wrapped
 * underneath it, and the pair overflowed the 71px field box by 29px — visible
 * on `מגדר` here and on `MDRT` in the joining wizard, which shares this file.
 *
 * `check box` in the Figma library is 15 square. 18 is the nearest size that
 * still clears the 24px minimum a pointer target wants once its label is
 * counted, and the label is what people actually click.
 */
.gb-area__field input.gb-area__radio-input {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	accent-color: var(--gb-area-blue, #1043ff);
}

.gb-area__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	block-size: 46px;
}

.gb-area__radio {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.125rem;
	font-weight: 100;
}

.gb-area__actions {
	margin-block: 30px 0;
	text-align: center;
}

/*
 * `עדכון` is the outline button, at the inline-start, 102 x 44.
 *
 * All four panels on `609:8806` agree: `כפתור קונטור כחול כהה הובר כחול` at
 * x738 of an 840 row, x838 of a 1040 panel, x839 of the next — every one of
 * them flush against the row's right edge, which is the inline-START in RTL.
 * It was built centred and filled, which reads as the panel's primary action
 * when the drawing wants it as a quiet confirm.
 *
 * Scoped with its own modifier rather than on `.gb-area__actions .gb-area__button`,
 * because the join flow's "Back to the start" is also a `.gb-area__actions`
 * child and IS the primary action on that screen.
 */
.gb-area__actions:has(.gb-area__button--update) {
	text-align: start;
}

/* The same pill the rest of the site uses for an action. */
.gb-area__button {
	display: inline-flex;
	min-inline-size: 194px;
	block-size: 45px;
	align-items: center;
	justify-content: center;
	padding-inline: 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
	cursor: pointer;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1.2;
	text-decoration: none;
}

.gb-area__button:hover,
.gb-area__button:focus-visible {
	background: var(--gb-area-navy, #1b2b50);
	color: var(--gb-area-white, #fff);
}

/*
 * AFTER `.gb-area__button`, and that is the whole point of where it sits.
 *
 * Both selectors are one class, so on `background`, `color`, `min-inline-size`,
 * `block-size` and `padding-inline` — every property they both set — the
 * cascade breaks the tie on source order. Declared above the shared rule, as
 * this was, none of it applied and the button kept rendering as the 194 x 45
 * filled pill the comment above says it is replacing. `.gb-join__back` and
 * `.gb-join__next` are below the shared rule for the same reason.
 */
.gb-area__button--update {
	min-inline-size: 102px;
	block-size: 44px;
	padding-inline: 1rem;
	background: transparent;
	color: var(--gb-area-navy, #1b2b50);
	box-shadow: inset 0 0 0 1px var(--gb-area-navy, #1b2b50);
}

.gb-area__button--update:hover,
.gb-area__button--update:focus-visible {
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
	box-shadow: none;
}

.gb-area__saved {
	margin-block: -14px 20px;
	color: var(--gb-area-blue, #1043ff);
	font-weight: 700;
}

/* ------------------------------------------------- pending tabs, and the gate --- */

.gb-area__panel--pending,
.gb-area__gate {
	padding: 54px 100px;
	border-radius: 20px;
	background: var(--gb-area-grey, #f3f3f5);
	color: var(--gb-area-navy, #1b2b50);
	text-align: center;
}

.gb-area__pending-why,
.gb-area__gate-note {
	margin-block-end: 0;
	opacity: 0.75;
	font-size: 1rem;
}

.gb-area__gate {
	max-inline-size: 700px;
	margin-inline: auto;
}

/* -------------------------------------------------------------- narrower --- */

@media (max-width: 1024px) {
	.gb-area__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-area__panel {
		padding: 40px;
	}

	.gb-area__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gb-area__field,
	.gb-area__field--image {
		grid-column: span 1;
	}
}

@media (max-width: 700px) {
	.gb-area__panel,
	.gb-area__panel--pending,
	.gb-area__gate {
		padding: 28px 20px;
	}

	.gb-area__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-area__field,
	.gb-area__field--image {
		grid-column: span 1;
	}

	.gb-area__heading {
		font-size: 1.75rem;
	}

	.gb-area__licence-line {
		font-size: 1.25rem;
	}

	.gb-area__licence-number,
	.gb-area__licence-note {
		font-size: 1rem;
	}
}

/* =============================================================== sign in === */

/*
 * `480:4812` — the 1400 band holding the join banner at the start edge and a
 * blue 556 x 579 card at 1102. `480:5076` gives the card `#1043FF` at radius 20
 * with a 7.5 backdrop blur and 95% opacity.
 */
.gb-login {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	padding-block: 51px 90px;

	--gb-area-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-area-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-area-amber: var(--wp--preset--color--accent, #fcac0b);
	--gb-area-grey: var(--wp--preset--color--surface, #f3f3f5);
	--gb-area-dark-grey: var(--wp--preset--color--dark-grey, #ddd);
	--gb-area-teal: var(--wp--preset--color--turquoise, #1fa9ab);
	--gb-area-blue-grey: var(--wp--preset--color--blue-grey, #cad9dc);
	--gb-area-white: var(--wp--preset--color--white, #fff);
}

/* 556 + 40 + 804 = 1400. The card is first in source order so RTL puts it at
   the inline end, where the drawing has it. */
.gb-login__layout {
	display: grid;
	grid-template-columns: 556px minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
}

/* 480:4812 draws the banner and the card the same height. The card decides
   it - the SMS half is not built (DEFINITION_DEVIATIONS 8) - and the banner
   follows: the grid stretches the wrapper, the wrapper stretches the block. */
.gb-login__banner {
	display: grid;
}

.gb-login__banner > * {
	block-size: 100%;
	box-sizing: border-box;
}

/* The wrapper is definite now; the block inside it still needs telling. */
.gb-login__banner .gboneai-cta-banner {
	block-size: 100%;
}

/* `480:4812`: a 556 card around 414-wide fields, so 71 either side. */
.gb-login__card {
	box-sizing: border-box;
	padding: 40px 71px;
	border-radius: 20px;
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
}

.gb-login__title {
	margin-block: 0 24px;
	color: var(--gb-area-white, #fff);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.gb-login__field {
	margin-block: 0 16px;
}

/* 16 in the drawing, against the personal area's 18 — a smaller card. */
.gb-login__field label {
	display: block;
	margin-block-end: 7px;
	color: var(--gb-area-white, #fff);
	font-size: 1rem;
	font-weight: 100;
	line-height: 1.2;
}

/* The star is printed before the label since 27/09 (DEFINITION_DEVIATIONS 10b);
   the negative inset that pulled it toward the text when it came after is gone. */
.gb-login__required {
	margin-inline-start: 0;
}

.gb-login__field input {
	box-sizing: border-box;
	inline-size: 100%;
	block-size: 40px;
	padding-inline: 20px;
	border: 0;
	border-radius: 25px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font: inherit;
	font-size: 1.125rem;
}

.gb-login__field input:focus-visible {
	outline: 2px solid var(--gb-area-white, #fff);
	outline-offset: 2px;
}

.gb-login__row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-block: 0 20px;
	font-size: 0.9375rem;
}

.gb-login__remember {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	cursor: pointer;
}

.gb-login__link {
	color: var(--gb-area-white, #fff);
	text-decoration: underline;
}

/* The drawn submit is navy on the blue card, not another blue pill. */
.gb-login__submit {
	display: block;
	/* 402 x 40, centred - six narrower than the fields above it, as drawn. */
	inline-size: min(402px, 100%);
	block-size: 40px;
	margin-inline: auto;
	border: 0;
	border-radius: 25px;
	background: var(--gb-area-navy, #1b2b50);
	color: var(--gb-area-white, #fff);
	cursor: pointer;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1.2;
}

.gb-login__submit:hover,
.gb-login__submit:focus-visible {
	background: var(--gb-area-amber, #fcac0b);
	color: var(--gb-area-navy, #1b2b50);
}

.gb-login__actions {
	margin-block: 0 16px;
}

/* 1.8 on 15px is a 27px line, which gets the link inside it over the 24px tap
   target floor — it measured 100x16. Same fix as the event form is consent
   links, and the same reason it was missed there first. */
.gb-login__join {
	margin-block: 0;
	font-size: 0.9375rem;
	line-height: 1.8;
	text-align: center;
}

.gb-login__join .gb-login__link {
	display: inline-block;
	padding-block: 5px;
}

.gb-login__error {
	margin-block: 0 16px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font-weight: 700;
	text-align: center;
}

/* ------------------------------------------------- the inactive dialog --- */

/*
 * `480:5298`. A native `dialog[open]` — it needs no script, closes on Escape and
 * keeps focus inside on its own. Centred over the page rather than in flow.
 */
/*
 * `480:5569`: 683 wide, 52 of padding, every line of copy at 24, the copy and
 * the buttons 20 apart, the × 21 in from the top LEFT corner - the inline-end
 * in RTL. The contact line is not drawn (the specification asks for it; see the
 * comment in the template), so it takes the same rhythm as the rest.
 */
.gb-login__dialog[open] {
	position: fixed;
	z-index: 100;
	display: flex;
	box-sizing: border-box;
	inline-size: min(683px, calc(100% - 2rem));
	max-inline-size: none;
	flex-direction: column;
	padding: 52px;
	border: 0;
	margin: 0;
	border-radius: 20px;
	background: var(--gb-area-white, #fff);
	box-shadow: 0 0 20px 3px rgb(0 0 0 / 10%);
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.5rem;
	line-height: 1.25;
	inset: 50% auto auto 50%;
	text-align: center;
	transform: translate(-50%, -50%);
}

.gb-login__dialog p {
	margin-block: 0;
}

/* Out of the flow, so it does not push the copy down: a 44 x 44 hit area whose
   centre lands where the drawn 18px × does, 30 in from the corner. */
.gb-login__dialog-close {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-end: 8px;
	margin: 0;
}

.gb-login__dialog-close button {
	display: flex;
	inline-size: 44px;
	block-size: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gb-area-navy, #1b2b50);
	cursor: pointer;
	font-size: 1.75rem;
	line-height: 1;
}

.gb-login__dialog-lead {
	font-size: inherit;
}

.gb-login__dialog .gb-login__dialog-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	justify-content: center;
	margin-block-start: 8px;
	font-size: 1.25rem;
	font-weight: 700;
}

.gb-login__dialog-strong {
	font-weight: 700;
}

.gb-login__dialog .gb-login__dialog-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-block-start: 20px;
}

/* 176 x 40 per `480:5563`. */
.gb-login__dialog-actions .gb-area__button {
	min-inline-size: 0;
	inline-size: 176px;
	block-size: 40px;
	padding-inline: 20px;
}

@media (max-width: 600px) {
	.gb-login__dialog[open] {
		padding: 52px 20px 28px;
		font-size: 1.125rem;
	}
}

.gb-login__button--amber {
	background: var(--gb-area-amber, #fcac0b);
	color: var(--gb-area-navy, #1b2b50);
}

@media (max-width: 900px) {
	.gb-login__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.gb-login__card {
		padding: 28px 20px;
	}
}

/* ============================================================== joining === */

.gb-join {
	box-sizing: border-box;
	inline-size: min(1400px, 100% - 2rem);
	margin-inline: auto;
	padding-block: 54px 90px;

	--gb-area-blue: var(--wp--preset--color--primary, #1043ff);
	--gb-area-navy: var(--wp--preset--color--dark, #1b2b50);
	--gb-area-grey: var(--wp--preset--color--surface, #f3f3f5);
	--gb-area-dark-grey: var(--wp--preset--color--dark-grey, #ddd);
	--gb-area-teal: var(--wp--preset--color--turquoise, #1fa9ab);
	--gb-area-blue-grey: var(--wp--preset--color--blue-grey, #cad9dc);
	--gb-area-white: var(--wp--preset--color--white, #fff);
}

/*
 * The stepper — four circles joined by a rule, `909:7587` onward. `row-reverse`
 * is not needed: an ordered list in an RTL document already runs right to left,
 * which is why step 1 sits at the right in the drawing.
 */
.gb-join__steps {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}

.gb-join__step {
	display: flex;
	align-items: center;
}

/* The rule between them, drawn on every step but the first in reading order.
   `909:7587` puts the circles 145 apart at 70 across, so the rule is the 75 that
   is left — and `Line 8` in the file is exactly 75 wide. */
.gb-join__step + .gb-join__step::before {
	inline-size: 75px;
	block-size: 2px;
	background: var(--gb-area-dark-grey, #ddd);
	content: "";
}

/* 70 across, per `Ellipse 27` on every one of the four steps. The numeral inside
   is drawn at 36 tall, which is a 30px face, not the 18 this used to set. */
.gb-join__step-mark {
	display: flex;
	inline-size: 70px;
	block-size: 70px;
	align-items: center;
	justify-content: center;
	/* A step not reached yet is #DDD all through - ring, rule and numeral. */
	border: 2px solid var(--gb-area-dark-grey, #ddd);
	border-radius: 50%;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-dark-grey, #ddd);
	font-size: 1.875rem;
	font-weight: 700;
}

.gb-join__step.is-current .gb-join__step-mark {
	border-color: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-blue, #1043ff);
}

.gb-join__step.is-done .gb-join__step-mark {
	border-color: var(--gb-area-blue, #1043ff);
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
}

/* The rule out of the current step is already blue: it is the way forward. */
.gb-join__step.is-done + .gb-join__step::before,
.gb-join__step.is-current + .gb-join__step::before {
	background: var(--gb-area-blue, #1043ff);
}

/* Four 70px marks and three 75px rules are 505 wide - more than a phone has. */
@media (max-width: 560px) {
	.gb-join__step + .gb-join__step::before {
		inline-size: 24px;
	}

	.gb-join__step-mark {
		inline-size: 44px;
		block-size: 44px;
		font-size: 1.125rem;
	}
}

/* The panel is the personal area's, at the drawn 1040 rather than the full band. */
.gb-join__panel {
	max-inline-size: 1040px;
	margin-inline: auto;
}

.gb-join__actions {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-block: 30px 0;
}

/*
 * WHICH END EACH BUTTON SITS AT, and why it is not the flex default.
 *
 * `Frame 147` on `909:7587` and `909:8569` is 840 wide, and Figma measures x
 * from the LEFT whatever the text direction: the outline `חזרה` sits at x738
 * — flush right, the inline-START in RTL — and the filled `הבא` at x0, flush
 * left, the inline-END. So they are at OPPOSITE ends of the row, not adjacent.
 *
 * The DOM now runs [back, next], which is also the RTL reading order, and
 * `margin-inline-start: auto` on next pushes it to the far end. That one rule
 * covers both cases: on step 1, where there is no back button, the auto margin
 * still carries `הבא` to the inline-end on its own.
 */
.gb-join__next {
	min-inline-size: 95px;
	margin-inline-start: auto;
	block-size: 44px;
	padding-inline: 1rem;
}

/*
 * The consent block on step 3 — `Group 91` on `909:8569`, 834 x 182.
 *
 * It SCROLLS. The drawing clips the text mid-sentence and puts a 4 x 75
 * rectangle down the left edge, which is a scrollbar thumb in a 182 track, not
 * a decorative rule. So: a fixed height, `overflow-y: auto`, and the insets the
 * drawing gives — 25 at the inline-start, 40 at the inline-end to leave the
 * thumb its lane.
 *
 * `tabindex="0"` in the markup because a scrollable region that only a mouse
 * can reach is a keyboard trap in the other direction: the text a member is
 * agreeing to has to be reachable without a pointer.
 */
.gb-join__consent {
	overflow-y: auto;
	box-sizing: border-box;
	block-size: 182px;
	padding-block: 20px;
	padding-inline: 25px 40px;
	border: 1px solid var(--gb-area-grey, #f3f3f5);
	border-radius: 20px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font-size: 0.8125rem;
	grid-column: 1 / -1;
	line-height: 1.55;
	scrollbar-color: var(--gb-area-blue-grey, #cad9dc) transparent;
	scrollbar-width: thin;
}

.gb-join__consent p {
	margin: 0 0 0.85em;
}

.gb-join__consent p:last-child {
	margin-block-end: 0;
}

.gb-join__consent:focus-visible {
	outline: 2px solid var(--gb-area-blue, #1043ff);
	outline-offset: 2px;
}

/* WebKit still ignores `scrollbar-width`, and the drawn thumb is 4 across. */
.gb-join__consent::-webkit-scrollbar {
	inline-size: 4px;
}

.gb-join__consent::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background: var(--gb-area-blue-grey, #cad9dc);
}

/* Back is the drawn `כפתור קונטור כחול כהה הובר כחול` — 102 x 44, navy outline,
   and the component's own hover fills it BLUE, not navy. */
.gb-join__back {
	min-inline-size: 102px;
	block-size: 44px;
	padding-inline: 1rem;
	background: transparent;
	color: var(--gb-area-navy, #1b2b50);
	box-shadow: inset 0 0 0 1px var(--gb-area-navy, #1b2b50);
}

.gb-join__back:hover,
.gb-join__back:focus-visible {
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
	box-shadow: none;
}

.gb-join__amount {
	font-size: 1.5rem;
	font-weight: 700;
}

/*
 * Step 4, `909:8865`: "דלג להרשמה, אשלים את הפרטים בהמשך", an underlined 14px
 * link level with the title at the panel's far (inline-end) side. Last in the
 * markup so Enter still means "finish"; lifted here to where it is drawn.
 */
.gb-join__panel {
	position: relative;
}

.gb-join__skip {
	position: absolute;
	inset-block-start: 54px;
	inset-inline-end: 100px;
	min-block-size: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gb-area-navy, #1b2b50);
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.gb-join__skip:hover,
.gb-join__skip:focus-visible {
	color: var(--gb-area-blue, #1043ff);
}

/* "לקבלת הטבות ייחודיות, ספר לנו קצת יותר עליך" — 20 bold navy. */
.gb-area__subhead {
	margin: 10px 0 0;
	color: var(--gb-area-navy, #1b2b50);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

/* The children repeater sits in the panel's own grid, row by row. */
.gb-area__children,
.gb-area__child {
	display: contents;
}

/* "הוספת ילד +" — a small navy outline pill at the inline-start. */
.gb-area__add-child {
	min-block-size: 38px;
	padding-inline: 20px;
	border: 1px solid var(--gb-area-navy, #1b2b50);
	border-radius: 25px;
	background: transparent;
	color: var(--gb-area-navy, #1b2b50);
	cursor: pointer;
	font: inherit;
	font-size: 1rem;
}

.gb-area__add-child:hover,
.gb-area__add-child:focus-visible {
	border-color: var(--gb-area-blue, #1043ff);
	background: var(--gb-area-blue, #1043ff);
	color: var(--gb-area-white, #fff);
}

@media (max-width: 1024px) {
	.gb-join__skip {
		inset-block-start: 40px;
		inset-inline-end: 40px;
	}
}

/* No room beside the title on a phone: the link takes its own line above it. */
@media (max-width: 700px) {
	.gb-join__skip {
		inset-block-start: 20px;
		inset-inline: 20px auto;
		text-align: start;
	}

	.gb-join__panel:has(.gb-join__skip) .gb-area__panel-title {
		margin-block-start: 40px;
	}
}

/* The consent lines of step 3, and a select that has no values yet. */
.gb-area__consent-line {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

.gb-area__consent-line input {
	flex: 0 0 auto;
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: 0.15em;
}

/* `display: block` because an inline-block select sits on the text baseline and
   adds four pixels of descender under it — enough to make the three rows that
   hold a chooser 75 tall where every other row is 71. */
.gb-area__field select {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	min-block-size: 46px;
	padding-inline: 20px;
	border: 0;
	border-radius: 25px;
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	font: inherit;
	font-size: 1.125rem;
}

/* The same 25 pill as its neighbours — 20 made one chooser in a row of three
   visibly squarer than the other two. */
.gb-area__field select[multiple] {
	padding-block: 10px;
	border-radius: 25px;
}

/*
 * A LIST THE CLIENT HAS NOT SUPPLIED READS AS UNAVAILABLE, NOT AS ABSENT.
 *
 * It used to take `--gb-area-grey`, which is `#F3F3F5` — the panel's own colour.
 * Two of the four choosers therefore had no visible field at all: a grey pill on
 * a grey panel, with the drawn white box nowhere on screen. It keeps the white
 * field every other control has, and says it is unavailable through the cursor
 * and its own copy instead of by disappearing.
 */
.gb-area__field select:disabled {
	background: var(--gb-area-white, #fff);
	color: var(--gb-area-navy, #1b2b50);
	cursor: not-allowed;
	opacity: 0.55;
}

.gb-area__hint--done {
	color: var(--gb-area-blue, #1043ff);
	font-weight: 700;
	opacity: 1;
}