/**
 * §16.3's account pages: sign in, create account, reset password.
 *
 * THE SAME PALETTE AS THE BOOKING FLOW, restated rather than shared. These pages
 * are reached without the booking form on them — from an emailed reset link, or
 * straight to /account/ — so `booking.css` is not loaded and cannot be relied
 * on. The values are deliberately identical: a customer who signs in mid-booking
 * must not cross a visible seam between two designs.
 *
 * SCOPED TO srs-* THROUGHOUT, and defended against the theme. Same reasoning as
 * booking.css: this sits inside an Elementor page whose theme is not knowable in
 * advance, so every colour and border these forms depend on is stated.
 *
 * NO BUILD STEP (D-009). Plain CSS with custom properties, enqueued as written.
 */

.srs-account {
	--srs-snow: #fbfcfd;
	--srs-snow-2: #f2f5f8;
	--srs-snow-3: #e6ebf1;
	--srs-ink: #0d1218;
	--srs-ink-2: #2a3542;
	--srs-ink-3: #5a6878;
	--srs-ink-4: #8b98a8;
	--srs-indigo: #16324f;
	--srs-indigo-2: #1f4a75;
	--srs-glacier: #3d8ea8;
	--srs-ok: #2f7a4f;
	--srs-ok-lite: #e7f3ec;
	--srs-bad: #b3261e;
	--srs-bad-lite: #fbe6e4;
	--srs-line: #d5dde6;
	--srs-line-2: #eef2f6;
	--srs-card: #fff;

	--srs-sans: "Segoe UI Variable Text", "Segoe UI", -apple-system, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
/*
 * ONE TYPEFACE. `--srs-display` was a serif — the prototype's, and kept here to
 * match it — used for card titles while everything around them was the sans
 * below. Two faces a few pixels apart on adjacent headings read as a rendering
 * fault rather than as a hierarchy, which is exactly how it was reported. The
 * variable stays so the call sites do not all have to change, and so a display
 * face can be reintroduced in one place if it is ever wanted again.
 */
	--srs-display: var( --srs-sans );

	--srs-radius: 3px;
	--srs-shadow: 0 1px 2px rgba( 13, 18, 24, 0.06 ), 0 8px 24px -12px rgba( 13, 18, 24, 0.14 );

	display: block;
	float: none;
	font-family: var( --srs-sans );
	color: var( --srs-ink );
	font-size: 15px;
	line-height: 1.55;
}

/* ---------------------------------------------------------------------------
 * Layout
 *
 * ONE PANEL AT A TIME. §16.3 requires the login page to carry a clear Create
 * Account option; it does not require both forms to be on screen at once, and
 * having them there costs more than it looks. Two forms each with an email and
 * a password field is how a password manager fills the wrong one, and with
 * Turnstile enabled a shop renders two challenges for a customer who will only
 * answer one.
 *
 * So the grid holds a single panel and the other form is a link away. The rule
 * stays a grid rather than becoming a block because the panel below still wants
 * the same gap and alignment, and because the switch is a query argument — the
 * markup is identical either way.
 * ------------------------------------------------------------------------- */

.srs-account__panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

/*
 * THE PAGE'S OWN RHYTHM. Every section on the account page — the signed-in
 * header, the details, the password, email and deletion cards — was a sibling
 * with no margin, relying on a grid gap that only wrapped some of them. They
 * butted into one another and read as a single long box with lines through it.
 *
 * A gap on the container rather than margins on the children, so nothing
 * depends on which section happens to be last and no margin collapses through
 * a card border.
 */
.srs-account {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/*
 * The heading and its note sit outside the cards, so they carry their own
 * spacing rather than inheriting the gap meant for cards.
 */
.srs-account .srs-details > .srs-account__heading {
	margin: 0 0 6px;
}

.srs-account .srs-details > .srs-note {
	margin: 0 0 16px;
}

/*
 * The last thing in a card body should not sit against the border. Field
 * paragraphs carry a bottom margin that the body's padding then doubles, and
 * hint text carries none at all — so the body settles it for both.
 */
.srs-account .srs-panel__body > *:last-child {
	margin-bottom: 0;
}

/* Save details belongs to the cards above it, not to the card below. */
.srs-account .srs-details > .srs-account__actions {
	margin: 0;
}

/*
 * The way back to signing in, from the register page. A sentence with a link in
 * it rather than a button: the register page has one action, and a second
 * button of the same size argues with it. The rule above already separates
 * them, so this no longer draws its own border.
 */
.srs-account__switch {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	color: var( --srs-ink-3 );
}

.srs-account__switch a {
	color: var( --srs-indigo-2 );
}

/*
 * ONE CARD, AND NARROW ENOUGH TO READ AS ONE THING (#311). The prototype's
 * measure. A sign-in form given the full width of a page reads as a page with
 * a form somewhere on it; at this width it reads as the thing the page is for.
 */
.srs-account--narrow {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

/*
 * The line between "what this page is for" and "the other page". Two
 * full-width buttons with nothing between them are a pair of equal choices,
 * and somebody who already has an account presses the wrong one.
 */
.srs-account .srs-account__rule {
	height: 0;
	margin: 18px 0;
	border: 0;
	border-top: 1px solid var( --srs-line );
}

/*
 * FULL WIDTH, BOTH OF THEM. A submit button sized to its text and a link sized
 * to its text are two different shapes doing the same job, and the difference
 * reads as importance rather than as length of word.
 */
.srs-account .srs-button--block {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

.srs-account__panel {
	display: block;
	box-sizing: border-box;
	padding: 22px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	background: var( --srs-card );
	box-shadow: var( --srs-shadow );
}

/*
 * The create-account panel reads as the secondary of the two without being
 * hidden: a tinted ground rather than a smaller heading or a quieter button.
 */
.srs-account__panel--create {
	background: var( --srs-snow-2 );
}

/*
 * DOUBLED SO THE COMPONENT KEEPS ITS OWN SIZE, WEIGHT AND COLOUR. Wolf styles
 * `.entry-content h2/h3/h4` at (0,1,1); a single class is (0,1,0) and loses, so
 * this heading rendered at the theme's heading size in the theme's ink. Repeating
 * the class is the same idiom the buttons here already use, and it keeps the
 * values in the one place that owns them rather than restating them elsewhere.
 */
.srs-account__heading.srs-account__heading {
	margin: 0 0 6px;
	font-family: var( --srs-display );
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: var( --srs-ink );
}

.srs-account__lead {
	margin: 0 0 16px;
	font-size: 14px;
	color: var( --srs-ink-3 );
}

.srs-account__form {
	display: block;
	margin: 0;
}

.srs-account__actions {
	margin: 18px 0 0;
}

/*
 * A NAME A SIGHTED READER DOES NOT NEED. The reset form carries its field's
 * name in the placeholder, which is enough on a form with one field and not
 * enough for anyone using a screen reader — so the label stays and is taken out
 * of the visual flow rather than out of the document.
 *
 * `clip-path` with a 1px box, not `display: none`: hidden the second way, a
 * label is hidden from assistive technology too, which is the whole thing this
 * is trying to avoid.
 */
.srs-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/*
 * "OR", between the two things a visitor can do here. A rule either side rather
 * than the word alone, so it reads as a fork in the path and not as a heading
 * for what follows.
 */
.srs-account__or {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0;
	color: var( --srs-ink-3 );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
}

.srs-account__or::before,
.srs-account__or::after {
	flex: 1;
	height: 1px;
	background: var( --srs-line );
	content: "";
}

/* Small and centred under the two actions, as the prototype has it. */
.srs-account__aside {
	margin: 14px 0 0;
	font-size: 13px;
	text-align: center;
}

.srs-account__aside a {
	color: var( --srs-indigo-2 );
}

/* ---------------------------------------------------------------------------
 * Fields and buttons, restated from the booking flow
 * ------------------------------------------------------------------------- */

.srs-account .srs-field {
	display: block;
	margin: 0 0 14px;
}

/* The two halves of one name, side by side.
 *
 * A GRID RATHER THAN TWO FLOATED HALVES, so the two labels sit on one baseline
 * even when one wraps to a second line and the other does not — which is what
 * happens the moment these are translated, since 姓 is one character and
 * "Family name" is eleven.
 *
 * The gap is the grid's, and the fields keep their own bottom margin, so the
 * row below sits exactly where it would if these were two separate fields. */
.srs-account .srs-name-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}

.srs-account .srs-field > label {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	color: var( --srs-ink-2 );
}

/*
 * SELECTS AND TEXTAREAS WERE MISSING FROM THIS RULE, so "Preferred messaging
 * app" rendered as a browser-default select — 19px tall with a grey system
 * border, beside 37px inputs. `booking.css` had always styled all three; this
 * stylesheet listed only `input`, and nothing pointed the difference out
 * because the account page has exactly one select on it.
 */
.srs-account .srs-field input,
.srs-account .srs-field select,
.srs-account .srs-field textarea,
.srs-account .srs-combo__input {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	background: var( --srs-card );
	color: var( --srs-ink );
	font-family: inherit;
	font-size: 14px;
}

.srs-account .srs-field input:focus,
.srs-account .srs-field select:focus,
.srs-account .srs-field textarea:focus,
.srs-account .srs-combo__input:focus {
	outline: 2px solid var( --srs-glacier );
	outline-offset: 1px;
	border-color: var( --srs-glacier );
}

/* A checkbox is not a full-width text box. */
.srs-account .srs-field--check > label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 14px;
	color: var( --srs-ink-2 );
}

.srs-account .srs-field--check input {
	width: auto;
	margin: 0;
}

.srs-account .srs-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 18px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	background: var( --srs-card );
	color: var( --srs-ink );
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.srs-account .srs-button--primary,
.srs-account .srs-button--primary:hover,
.srs-account .srs-button--primary:focus {
	background: var( --srs-indigo );
	border-color: var( --srs-indigo );
	/* Stated, not inherited. */
	color: #fff;
}

/*
 * `--danger` was applied in the markup and defined nowhere, so Request deletion
 * looked like every other quiet button. The one irreversible action on the page
 * should not be the one that looks least consequential.
 */
.srs-account .srs-button--danger,
.srs-account .srs-button--danger:hover,
.srs-account .srs-button--danger:focus {
	background: var( --srs-danger, #b32d2e );
	border-color: var( --srs-danger, #b32d2e );
	color: #fff;
}

.srs-account .srs-button--danger:hover,
.srs-account .srs-button--danger:focus {
	background: #8c2426;
	border-color: #8c2426;
}

.srs-account .srs-button--primary:hover {
	background: var( --srs-indigo-2 );
	border-color: var( --srs-indigo-2 );
}

/* ---------------------------------------------------------------------------
 * D-047's checklist
 *
 * Ticks, not a score. The met state is carried by BOTH a colour and a mark, so
 * it survives a colour-blind reader and a monochrome screen — a checklist whose
 * only signal is green/grey communicates nothing to a good many people.
 * ------------------------------------------------------------------------- */

/*
 * THE CHECKLIST IS A NOTE ON THE FIELD, RAISED WHILE THE FIELD IS IN USE. It is
 * taken out of flow so that raising it moves nothing: a panel that pushed the
 * confirmation field and the button down the page on focus would shift the
 * target a customer is reaching for at the moment they reach for it.
 *
 * `:focus-within` RATHER THAN A CLASS, so nothing has to script this and the
 * requirements still appear on focus in a browser running no JavaScript at all.
 * It also covers the reveal button, which `password-reveal.js` inserts INSIDE
 * this block — showing the password must not dismiss the rules for it.
 *
 * `visibility` ALONGSIDE `opacity` IS DELIBERATE, and is what keeps the hidden
 * state honest: a panel left at `opacity: 0` is still focusable and still read
 * aloud, so `aria-describedby` on the input would recite four requirements at a
 * customer with no way to see that they had appeared. Hidden here means hidden
 * to everyone, and shown — on focus — means shown to everyone.
 */
.srs-password {
	position: relative;
}

.srs-password__hint {
	position: absolute;
	z-index: 5;
	right: 0;
	left: 0;
	top: calc( 100% + 8px );
	padding: 12px 14px;
	border: 1px solid var( --srs-line );
	border-radius: 8px;
	background: var( --srs-card );
	box-shadow: 0 8px 24px rgba( 15, 23, 42, 0.14 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( -4px );
	transition: opacity 130ms ease, transform 130ms ease, visibility 130ms;
}

/* The caret, so the panel reads as belonging to the field above it and not to
 * the field it happens to be covering. */
.srs-password__hint::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 18px;
	width: 8px;
	height: 8px;
	border: 1px solid var( --srs-line );
	border-width: 1px 0 0 1px;
	background: var( --srs-card );
	transform: rotate( 45deg );
}

.srs-password:focus-within .srs-password__hint {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {

	.srs-password__hint {
		transition: none;
		transform: none;
	}
}

.srs-password__intro {
	margin: 0 0 6px;
	font-size: 13px;
	color: var( --srs-ink-3 );
}

/* The mismatch warning. It carries `hidden`, so the rule must not set a
 * `display` that would override it — `[hidden]` loses to a class selector of
 * equal specificity that comes later in the file. Stated here rather than left
 * to chance, because the failure is a warning permanently on screen. */
.srs-password-confirm__mismatch {
	margin: 6px 0 0;
	font-size: 13px;
	color: var( --srs-bad );
}

.srs-password-confirm__mismatch[hidden] {
	display: none;
}

/* D-236's refusal, raised while the password field holds a backslash. It sits
 * outside the hint panel, because a warning that only appears while the field
 * has focus is one a customer can leave the field without ever reading. Same
 * `[hidden]` note as above. */
.srs-password__refusal {
	margin: 6px 0 0;
	font-size: 13px;
	color: var( --srs-bad );
}

.srs-password__refusal[hidden] {
	display: none;
}

.srs-password__rules {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srs-password__rule {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	color: var( --srs-ink-3 );
}

.srs-password__tick {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border: 1px solid var( --srs-line );
	border-radius: 50%;
	background: var( --srs-card );
}

.srs-password__rule.is-met {
	color: var( --srs-ok );
}

.srs-password__rule.is-met .srs-password__tick {
	position: relative;
	border-color: var( --srs-ok );
	background: var( --srs-ok );
}

/* The mark itself: a tick drawn with two borders, so no image is needed. */
.srs-password__rule.is-met .srs-password__tick::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 1px;
	width: 3px;
	height: 7px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate( 45deg );
}

/* ---------------------------------------------------------------------------
 * Messages
 * ------------------------------------------------------------------------- */

.srs-account__error,
.srs-account__notice {
	box-sizing: border-box;
	margin: 0 0 14px;
	padding: 10px 12px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	font-size: 14px;
}

.srs-account__error {
	border-color: var( --srs-bad );
	background: var( --srs-bad-lite );
	color: var( --srs-bad );
}

.srs-account__notice {
	border-color: var( --srs-ok );
	background: var( --srs-ok-lite );
	color: var( --srs-ok );
}

/* ---------------------------------------------------------------------------
 * D-041: down to 390px, with no horizontal overflow
 * ------------------------------------------------------------------------- */

@media ( max-width: 860px ) {
	.srs-account__panels {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 760px ) {
	.srs-account__panel {
		padding: 18px;
	}

	/*
	 * Full-width primary buttons on a phone, per D-041. A thumb reaching the
	 * bottom of a form should not have to aim.
	 */
	.srs-account .srs-button {
		width: 100%;
		box-sizing: border-box;
	}
}

@media ( max-width: 460px ) {
	/* Stacked again. Half of a 390px screen, minus the panel's padding, leaves
	 * a box too narrow to read a name back in — and a family name in kana or
	 * Han is exactly where that shows. D-041. */
	.srs-account .srs-name-row {
		grid-template-columns: 1fr;
	}

	.srs-account__heading {
		font-size: 20px;
	}

	.srs-account__panel {
		padding: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * §16.7's dashboard
 *
 * A TABLE ON A SCREEN WIDE ENOUGH FOR ONE, AND CARDS BELOW THAT (#312). This
 * used to be cards at every width, on the reasoning that a booking has a
 * reference, two dates, three money figures and a status, and a table of that
 * on a phone is either scrolled sideways or unreadable — which is true, and is
 * why the cards are still here under 760px.
 *
 * What the reasoning missed is the other end. Six bookings as six cards is six
 * separate readings; as a table it is one, and the figures line up in a column
 * so "which of these do I still owe money on" is answered by looking down it
 * rather than by reading each card in turn. That is the question the screen
 * exists for.
 *
 * ONE TABLE, TWO PRESENTATIONS — not a table and a duplicate list. The cells
 * carry their column name in `data-label`, and below the breakpoint the table
 * parts become blocks and each label is drawn back in. Nothing is emitted
 * twice, so a screen reader is never handed the same booking two ways.
 * ------------------------------------------------------------------------- */

/*
 * THE CONTAINER, NOT THE VIEWPORT, DECIDES. These pages sit in whatever measure
 * the theme or the Elementor section gives them — a 620px column on a 1280px
 * screen is normal — so a viewport media query put a six-column table in a
 * space that could not hold it. `container-type` makes the wrapper the thing
 * the query asks about.
 *
 * The overflow is the belt: a browser without container queries keeps the table
 * and scrolls it rather than bursting the card.
 */
.srs-account .srs-orders-wrap {
	container-type: inline-size;
	overflow-x: auto;
}

.srs-account .srs-orders {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/*
 * THE THEME'S TABLE STYLING, TURNED OFF FIRST.
 *
 * A block theme's reset puts a border on all four sides of every `table td,
 * table th` and stripes `tbody > tr:nth-child(2n+1) > td` grey. This table set
 * only its own `border-bottom`, so the other three sides and the striping came
 * through — and the booking list rendered as a spreadsheet grid with alternate
 * rows shaded, in a card whose whole style is hairlines and white.
 *
 * IT IS RESET RATHER THAN OVERRIDDEN PER PROPERTY, because the next theme will
 * not set the same four. What this table wants is stated below; what a theme
 * wants for tables generally is not this table's business.
 */
.srs-account .srs-orders th,
.srs-account .srs-orders td,
.srs-account .srs-orders tbody > tr > td {
	border: 0;
	background: none;
}

.srs-account .srs-orders th {
	padding: 0 10px 8px;

	/*
	 * THE RULE UNDER THE HEADINGS IS THE ONLY LINE THIS TABLE DRAWS. Stated as
	 * all four sides rather than just the bottom, because a `border-collapse`
	 * table resolves each edge from whichever adjoining box declares one — so
	 * a theme's `table th` rule was still showing above the heading row even
	 * after the shorthand reset above, on the one edge no cell below it shares.
	 */
	border: 0;
	border-bottom: 1px solid var( --srs-line );
	color: var( --srs-ink-3 );
	font-size: 11.5px;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.srs-account .srs-orders td {
	padding: 12px 10px;
	border-bottom: 1px solid var( --srs-snow-3 );
	vertical-align: middle;
}

.srs-account .srs-orders tr:last-child td {
	border-bottom: 0;
}

.srs-account .srs-orders th:first-child,
.srs-account .srs-orders td:first-child {
	padding-left: 0;
}

/*
 * A HEADING SITS OVER ITS OWN COLUMN. `text-align` was set on the cells and
 * left at the `th` default, so three columns of right-aligned money hung under
 * three left-aligned words and neither edge lined up with anything.
 */
.srs-account .srs-orders__n {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.srs-account .srs-orders th.srs-orders__actions {
	text-align: right;
}

.srs-account .srs-orders__ref,
.srs-account .srs-orders__period {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.srs-account .srs-orders__ref {
	font-weight: 600;
}

/*
 * TWO BUTTONS ON ONE LINE WHERE THEY FIT. They were block-level and stacked, so
 * a row with both "Pay balance now" and "Download statement" was twice the
 * height of every other row and the column had to be wide enough for the longer
 * of them however much space that wasted.
 */
.srs-account .srs-orders__actions {
	/*
	 * `1%` IS THE FIT-TO-CONTENT WIDTH FOR A TABLE CELL. The buttons are
	 * `nowrap`, so the column takes exactly what they need and the columns of
	 * prose beside it absorb the rest. Left to share the table evenly it was
	 * narrower than the two buttons together, which is what pushed them onto
	 * separate lines and made that row twice the height of its neighbours.
	 */
	width: 1%;
	padding-right: 0;
}

.srs-account .srs-orders__actions .srs-order-card__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;

	/*
	 * IT WRAPS, AND THAT IS THE RIGHT ANSWER. `nowrap` was tried: it makes the
	 * cell's fit-to-content width the two buttons side by side, which is wider
	 * than the card, so the whole table gained a horizontal scrollbar to save a
	 * row of height. "Pay additional charge now" beside "Download statement" is
	 * simply wider than this column gets, and a second line costs less than
	 * scrolling a table sideways.
	 */
	flex-wrap: wrap;

	/* No leading margin inside a cell: the cell's own padding places it. */
	margin: 0;
}

/*
 * ONE WIDTH FOR BOTH. Two buttons of different lengths stacked in a column read
 * as a ragged edge rather than as a pair; the longer one sets the width and the
 * other matches it.
 */
.srs-account .srs-orders__actions .srs-button {
	flex: 1 0 auto;
	justify-content: center;
	white-space: nowrap;
}

/*
 * Below 760px the table becomes one card per booking. `data-label` carries the
 * column name, so the header row can be hidden without the figures losing what
 * they are.
 */
@container ( max-width: 720px ) {
	.srs-account .srs-orders,
	.srs-account .srs-orders tbody,
	.srs-account .srs-orders tr,
	.srs-account .srs-orders td {
		display: block;
	}

	.srs-account .srs-orders thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.srs-account .srs-orders tr {
		margin: 0 0 14px;
		padding: 14px;
		border: 1px solid var( --srs-line );
		border-radius: var( --srs-radius );
		background: var( --srs-card );
	}

	.srs-account .srs-orders tr:last-child {
		margin-bottom: 0;
	}

	.srs-account .srs-orders td,
	.srs-account .srs-orders td:first-child {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 4px 0;
		border-bottom: 0;
		text-align: left;
	}

	.srs-account .srs-orders td::before {
		content: attr( data-label );
		color: var( --srs-ink-3 );
		font-size: 12.5px;
	}

	/*
	 * `td.` QUALIFIES IT PAST THE RULE ABOVE. The stacked `td` rule is
	 * `.srs-account .srs-orders td` — an element more specific than the plain
	 * class here — so `display: block` lost, the cell stayed a flex box with
	 * `space-between`, and its single child was pushed to the right end of an
	 * otherwise empty row.
	 */
	.srs-account .srs-orders td.srs-orders__actions {
		display: block;
		padding-top: 12px;

		/*
		 * `width: 1%` IS A TABLE-CELL INSTRUCTION AND THIS IS NO LONGER A CELL.
		 * Left in place it shrank the stacked block to the width of one button,
		 * so the two wrapped onto separate lines with two thirds of the card
		 * empty beside them.
		 */
		width: auto;
	}

	/*
	 * The buttons keep their row here too, but start from the left: there is no
	 * column of figures to align a right edge to once the table has stacked.
	 */
	.srs-account .srs-orders td.srs-orders__actions .srs-order-card__actions {
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 4px;
		padding-top: 12px;
		border-top: 1px solid var( --srs-snow-3 );
	}

	.srs-account .srs-orders td.srs-orders__actions::before {
		content: none;
	}
}

/* ---------------------------------------------------------------------------
 * The card every section sits in (#312)
 * ------------------------------------------------------------------------- */

.srs-account .srs-panel {
	margin: 0 0 18px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	background: var( --srs-card );
	box-shadow: var( --srs-shadow );
}

.srs-account .srs-panel:last-child {
	margin-bottom: 0;
}

/*
 * A card that is a direct child of the page drops its own bottom margin: the
 * container's gap already separates it, and the two together made some gaps
 * 38px where others were 20px. Cards nested inside a section keep the margin,
 * because nothing else spaces them.
 */
.srs-account > .srs-panel,
.srs-account > .srs-account__panel {
	margin-bottom: 0;
}

.srs-account > .srs-account__back {
	margin: 0;
}

.srs-account .srs-panel__title {
	margin: 0;
	padding: 12px 18px;
	border-bottom: 1px solid var( --srs-line );
	font-size: 15px;
	font-weight: 600;
	color: var( --srs-ink );
}

.srs-account .srs-panel__body {
	padding: 18px;
}

/*
 * COLUMNS THAT FOLLOW THE ROOM, NOT THE WINDOW. These pages sit inside whatever
 * measure the theme or the Elementor section gives them, which is not the
 * viewport — a media query would put three columns in a 620px column on a wide
 * screen. `auto-fit` asks for as many columns as actually fit.
 */
.srs-account .srs-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: 0 18px;
}

.srs-account .srs-grid--wide {
	grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
}


.srs-account__signed-in {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border-bottom: 1px solid var( --srs-line );
	font-size: 14.5px;
	color: var( --srs-ink-3 );
}

/*
 * DOUBLED SO THE COMPONENT KEEPS ITS OWN SIZE, WEIGHT AND COLOUR. Wolf styles
 * `.entry-content h2/h3/h4` at (0,1,1); a single class is (0,1,0) and loses, so
 * this heading rendered at the theme's heading size in the theme's ink. Repeating
 * the class is the same idiom the buttons here already use, and it keeps the
 * values in the one place that owns them rather than restating them elsewhere.
 */
.srs-dashboard__heading.srs-dashboard__heading {
	margin: 22px 0 10px;
	font-size: 17px;
	color: var( --srs-indigo );
}

.srs-dashboard__heading:first-child {
	margin-top: 0;
}

.srs-dashboard__empty {
	margin: 0;
	color: var( --srs-ink-3 );
}

.srs-dashboard__orders {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.srs-order-card {
	padding: 14px 16px;
	border: 1px solid var( --srs-line );
	border-radius: var( --srs-radius );
	background: var( --srs-snow );
}

.srs-order-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.srs-order-card__ref {
	font-weight: 600;
	color: var( --srs-indigo );
}

.srs-order-card__dates {
	margin: 6px 0 0;
	font-size: 14px;
	color: var( --srs-ink-3 );
}

/* The three figures, on one row and aligned on their digits. Tabular numerals
 * because a column of yen that does not line up is a column nobody can scan. */
.srs-order-card__money,
.srs-order-detail {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 10px;
	margin: 12px 0 0;
	font-variant-numeric: tabular-nums;
}

.srs-order-detail {
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.srs-order-card__money dt,
.srs-order-detail dt {
	margin: 0 0 2px;
	font-size: 12.5px;
	color: var( --srs-ink-3 );
}

.srs-order-card__money dd,
.srs-order-detail dd {
	margin: 0;
	font-weight: 600;
}

.srs-order-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.srs-status {
	padding: 2px 9px;
	border-radius: 999px;
	background: var( --srs-snow-3 );
	font-size: 12.5px;
	color: var( --srs-ink-2 );
	white-space: nowrap;
}

/* The three that mean somebody owes something, or has run out of time. Colour
 * is not the only signal — the words are in the pill. */
.srs-status--deposit_requested,
.srs-status--balance_requested,
.srs-status--full_amount_requested {
	background: #fff4e5;
	color: #7a4a00;
}

.srs-status--overdue {
	background: var( --srs-bad-lite );
	color: var( --srs-bad );
}

.srs-status--completed {
	background: var( --srs-ok-lite );
	color: var( --srs-ok );
}

@media ( max-width: 460px ) {
	.srs-order-card__money,
	.srs-order-detail {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ------------------------------------------------------------------------ *
 * D-030's Account Details
 * ------------------------------------------------------------------------ */

/*
 * Where a signed-in customer can go. Laid out as a row that wraps rather than a
 * fixed set, so a translated label twice the English length still fits at 390px
 * (D-041) instead of overflowing.
 */
.srs-account__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
}

/*
 * The current page is marked by weight and an underline, not by colour alone —
 * colour is not available to every reader, and `aria-current` already says it
 * to a screen reader.
 */
.srs-account__nav [aria-current="page"] {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.srs-details__heading {
	font-size: 1.05rem;
	margin: 1.75rem 0 0.75rem;
}

/* The first heading sits directly under the panel title, so it needs no gap. */
.srs-details__heading:first-of-type {
	margin-top: 0.5rem;
}

/*
 * The sentence under a one-name checkbox (D-095). Indented to the checkbox's
 * text rather than its box, so it reads as part of the same thought.
 */
.srs-account .srs-field--check .srs-hint {
	display: block;
	font-size: 0.875rem;
	margin-left: calc( 1rem + 0.5rem );
	opacity: 0.8;
}

.srs-account__back {
	margin: 1.5rem 0 0;
}

/*
 * D-123: a receipt per payment, beneath the booking's own.
 *
 * QUIETER THAN THE ACTIONS ABOVE. These are a list of documents to file, not a
 * thing to do next — the booking's own receipt and the pay button are the
 * decisions on this card, and a row of equally weighted buttons would bury them.
 */
.srs-order-card__receipts-label {
	color: #5a6878;
	font-size: 12px;
	margin: 12px 0 4px;
}

.srs-button--quiet {
	background: transparent;
	border: 1px solid #d5dde6;
	color: #16324f;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * The account header, and the card that ends the page
 * ------------------------------------------------------------------------- */

/*
 * THE HEADER IS NOT A CARD. It carries a greeting and nothing else — none of it
 * is content, and boxing it made the page open with an empty-looking container
 * above the thing the customer came for.
 *
 * KEYED ON THE MODIFIER, NOT ON `:first-child` (#503). It used to be positional,
 * and `notice_html()` renders immediately above this section — so the moment
 * anything was saved the greeting stopped being the first child, the rule
 * stopped matching, and the box came back. Measured: padding 0 → 22px, border 0
 * → 1px, background transparent → white, on the redirect after every save.
 *
 * The panel class stays on the element so the page's own vertical rhythm still
 * applies to it; only the card treatment is taken back off.
 */
.srs-account__panel--header {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.srs-account__signed-in {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * The two views are a choice between two places, so they are shaped like one.
 * The current page is still marked by weight as well as by fill — colour alone
 * is not available to every reader, and `aria-current` says it to a screen
 * reader either way.
 */
/*
 * A SIDEBAR ON A DESKTOP, A BAR BELOW IT (D-136). Five destinations do not fit
 * across the top of a 390px screen without wrapping into something that reads
 * as a paragraph of links. One list in the markup and two arrangements here —
 * two menus in the markup is how one of them comes to be missing an item.
 *
 * The shell is the grid: menu, then whichever destination is being drawn.
 */
.srs-account__shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

@media ( min-width: 861px ) {
	.srs-account__shell {
		grid-template-columns: 200px minmax( 0, 1fr );
		gap: 28px;
	}

	.srs-account__nav ul {
		flex-direction: column;
		gap: 4px;
	}

	.srs-account__nav a {
		display: block;
		border-radius: var( --srs-radius );
		text-align: left;
	}

	/* Away from the destinations, because leaving is not one of them. */
	.srs-account__nav-out {
		margin-top: 14px;
		padding-top: 14px;
		border-top: 1px solid var( --srs-line );
	}

	.srs-account__nav-out .srs-button {
		/* border-box, or the padding and border are added to the 100% and the
		 * button hangs 34px out of a 200px column. */
		box-sizing: border-box;
		width: 100%;
	}
}

.srs-account__nav ul {
	gap: 8px;
	margin: 0;
}

.srs-account__nav a {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var( --srs-line );
	border-radius: 999px;
	background: var( --srs-card );
	color: var( --srs-ink-2 );
	font-size: 14px;
	text-decoration: none;
}

.srs-account__nav a:hover,
.srs-account__nav a:focus {
	border-color: var( --srs-indigo );
	color: var( --srs-indigo );
}

.srs-account__nav [aria-current="page"] {
	border-color: var( --srs-indigo );
	background: var( --srs-indigo );
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.srs-account__nav [aria-current="page"]:hover,
.srs-account__nav [aria-current="page"]:focus {
	color: #fff;
}

/*
 * The one item in the list that is not a place. It keeps the button shape it
 * had in the header rather than the pill the destinations wear, so it does not
 * read as a sixth destination that happens never to be current.
 */
.srs-account__nav-out .srs-button,
.srs-account--logout .srs-button {
	padding: 7px 16px;
	background: var( --srs-snow-2 );
	font-size: 14px;
	/*
	 * MATCHED TO THE PILLS BESIDE IT, not to the buttons elsewhere on the page.
	 * `.srs-button` states `line-height: 1.2` and an anchor does not, so the
	 * destinations take the theme's line height and this took 1.2 — five pixels
	 * shorter, which on a phone shows as one item sitting low in a wrapped row.
	 * Inheriting keeps them equal whatever line height the theme hands down.
	 */
	line-height: inherit;
}

.srs-account__nav-out .srs-button:hover,
.srs-account__nav-out .srs-button:focus,
.srs-account--logout .srs-button:hover,
.srs-account--logout .srs-button:focus {
	background: var( --srs-snow-3 );
	border-color: var( --srs-ink-4 );
}

/*
 * D-138: below the sidebar's breakpoint the way out leaves the menu, because
 * five items across a 390px screen wrap into something that reads as a
 * paragraph of links — and because a shop's own header already has a place for
 * it. `[srs_logout]` is what goes there.
 *
 * HIDDEN RATHER THAN NOT RENDERED, so there is still one list in the markup and
 * two arrangements in CSS (D-136). A menu that is built differently at two
 * widths is a menu that comes to differ in more than layout.
 */
@media ( max-width: 860px ) {
	.srs-account__nav-out {
		display: none;
	}
}

/*
 * `[srs_logout]` standing alone, wherever a shop's header puts it. The wrapper
 * has to be `.srs-account` — that is where the custom properties live — but a
 * column flex box meant to space cards down a page is the wrong shape for one
 * button in a header.
 */
.srs-account--logout {
	display: inline-block;
}

/*
 * Deleting an account is the one thing on this page that cannot be undone, so
 * its card is set apart rather than looking like the four above it that simply
 * save a value.
 */
.srs-account .srs-details--danger {
	background: var( --srs-snow-2 );
}

.srs-account .srs-details--danger > .srs-panel__title {
	background: var( --srs-snow-3 );
}

/* ---------------------------------------------------------------------------
 * One booking, in full
 * ------------------------------------------------------------------------- */

/*
 * The reference and its status on one line: the status is a property of the
 * booking named beside it, not a caption under it.
 */
.srs-account .srs-detail__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
}

.srs-account .srs-detail__head .srs-dashboard__heading {
	margin: 0;
}

/*
 * A LABEL AND ITS VALUE, IN PAIRS THAT HOLD TOGETHER. Two columns rather than
 * an auto-filled track list, for the reason the admin's renter card needed the
 * same fix: independent `dt` and `dd` items wrap apart and leave a value under
 * somebody else's label.
 */
.srs-account .srs-facts {
	display: grid;
	grid-template-columns: minmax( 120px, max-content ) minmax( 0, 1fr );
	gap: 9px 18px;
	margin: 0;
}

.srs-account .srs-facts dt {
	color: var( --srs-ink-3 );
	font-size: 13px;
}

.srs-account .srs-facts dd {
	margin: 0;
}

/* Money reads down a column, so it is aligned and figured for it. */
.srs-account .srs-facts--money dd {
	font-variant-numeric: tabular-nums;
}

.srs-account .srs-facts--money {
	grid-template-columns: minmax( 120px, max-content ) minmax( 0, 1fr );
}

/* ---------------------------------------------------------------------------
 * The gear on a booking
 * ------------------------------------------------------------------------- */

.srs-account .srs-renter + .srs-renter {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var( --srs-line-2 );
}

.srs-account .srs-renter__name {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var( --srs-ink );
}

.srs-account .srs-renter__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.srs-account .srs-renter__items li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 5px 0;
}

.srs-account .srs-renter__option {
	color: var( --srs-ink-3 );
	font-size: 13px;
}

.srs-account .srs-renter__option::before {
	content: " · ";
}

.srs-account .srs-renter__price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.srs-account .srs-renter__subtotal {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var( --srs-line-2 );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 480px ) {

	.srs-account .srs-facts {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.srs-account .srs-facts dd {
		margin-bottom: 10px;
	}
}

/* ------------------------------------------------------------------
 * The eye on a password field
 *
 * The button is injected by password-reveal.js, so nothing below applies
 * until it has run — a browser without it sees an ordinary field, which is
 * the point. `padding-right` is on the wrapped input only, so the ordinary
 * fields around it keep the theme's own padding.
 * ------------------------------------------------------------------ */

.srs-reveal {
	position: relative;
	display: block;
}

.srs-reveal input {
	padding-right: 44px;
	width: 100%;
}

.srs-reveal__eye {
	position: absolute;
	right: 1px;
	top: 1px;
	bottom: 1px;
	width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: var( --srs-ink-3 );
	border-radius: 0 var( --srs-radius ) var( --srs-radius ) 0;
	box-shadow: none;
}

.srs-reveal__eye:hover,
.srs-reveal__eye:focus {
	background: none;
	color: var( --srs-ink );
}

.srs-reveal__eye:focus-visible {
	outline: 2px solid var( --srs-glacier );
	outline-offset: -2px;
}

.srs-reveal__eye.is-on {
	color: var( --srs-glacier );
}

.srs-reveal__eye svg {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}