/*
 * Profil — the account's personal and invoicing details. Tickets 13 and 14.
 * design/DESIGN-SYSTEM.md §4.13 (form controls), §4.9 (the accordion),
 * §3.4 (auto-fit grids), §1.2 (12px/.14em micro-label, 13px helper).
 *
 * Almost nothing here is a control. The site has ONE input recipe and it lives
 * in components/form.css; the checkbox is components/booking-form.css's; the
 * error border and message are form.css's too. Restating any of them would be
 * the mistake account.css already refuses to make. What this file adds is only
 * what a long form needs and a short one does not: the blocks it is divided
 * into, the locked e-mail, the consent log, and the disclosure that keeps the
 * invoicing half out of the way until somebody wants it.
 *
 * Three house rules, all kept:
 *   - radius 0 everywhere (--sp-radius). No exceptions in this file.
 *   - no @media at all. The one grid is repeat(auto-fit, minmax(220px, 1fr)),
 *     so the columns are decided by how much room there is and never by a
 *     breakpoint.
 *   - only tokens from assets/css/tokens.css. No literal colour or duration.
 *
 * The disclosure glyph is deliberately the same `+` / `−` the FAQ draws, from
 * the element's own `open` state, so no script decides what it says — which
 * matters here more than on the FAQ, because this form has to work with
 * JavaScript switched off.
 */

/* ================================================================= layout */

/*
 * Scoped under the section wrapper on purpose.
 *
 * `assets.php` enqueues components in filename order, so this file loads BEFORE
 * `booking-form.css` and `form.css`. An override written at the same
 * specificity as the base component it is overriding therefore LOSES — the base
 * comes later and wins the tie. Every rule below carries an element that also
 * holds the base class, so each one is raised to (0,2,0) by the wrapper and the
 * order stops mattering. `account-leaderboard.css` solves the same trap the
 * same way.
 */
.sp-profile .sp-profile__notice {
	margin-top: var(--sp-7);
}

.sp-profile__form {
	margin-top: var(--sp-11);
}

/*
 * A fieldset with no chrome: the browser's default border and padding are the
 * only rounded, inset thing this design would ever have drawn, and the block is
 * separated by a rule instead — the same hairline the account groups use.
 */
.sp-profile__block {
	margin: 0;
	padding: 0;
	border: 0;
}

.sp-profile__block + .sp-profile__block {
	margin-top: var(--sp-11);
	padding-top: var(--sp-11);
	border-top: 1px solid var(--sp-line-card);
}

.sp-profile__legend {
	display: block;
	width: 100%;
	margin: 0 0 var(--sp-7);
	padding: 0;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-20);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

/* §3.4: the modal form's tighter track, because this form is as dense. */
.sp-profile .sp-profile__grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ============================================================ the e-mail */

.sp-profile__identity {
	margin-bottom: var(--sp-7);
}

/*
 * Readable, selectable, copyable, still in the tab order — and visibly not
 * something you type into. The ground drops to the page colour and the text to
 * the body ramp, which is the design's existing way of saying "this is a value,
 * not a control". No `disabled` styling, no grey wash, no lock icon: the
 * sentence underneath is what explains it.
 */
.sp-profile .sp-input--locked {
	background: var(--sp-bg);
	border-color: var(--sp-line-card);
	color: var(--sp-text-60);
	cursor: default;
}

.sp-profile .sp-input--locked:focus-visible {
	color: var(--sp-text);
}

/* ------------------------------------------------------------ micro-bits */

/*
 * "nepovinné" beside a label. Quieter than the label it follows, so the eye
 * still reads the label first, and not italic — it is information about the
 * field, not display type.
 */
.sp-profile__optional {
	margin-left: var(--sp-2);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-nav);
	text-transform: none;
	color: var(--sp-text-35);
}

/* ============================================================== consent */

.sp-profile .sp-profile__checks {
	margin-top: 0;
}

/*
 * The record, shown to the person it is about. Small, level, and never red:
 * a withdrawn consent is a decision somebody made, not a problem with their
 * account.
 */
.sp-profile__consent-log {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	margin: var(--sp-3) 0 0;
	padding-left: calc(20px + var(--sp-3));
}

.sp-profile__consent-line {
	font-size: var(--sp-fs-xs);
	line-height: var(--sp-lh-body);
	color: var(--sp-text-45);
}

/* ====================================================== company (ticket 14) */

.sp-profile__company {
	margin-top: var(--sp-11);
	padding-top: var(--sp-11);
	border-top: 1px solid var(--sp-line-card);
}

/*
 * The closed state has to read as one quiet line somebody can ignore, because
 * most customers are private individuals who will never open it. The open state
 * is an ordinary block of the form.
 */
.sp-profile__summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	list-style: none;
	cursor: pointer;
	color: var(--sp-text);
}

.sp-profile__summary::-webkit-details-marker {
	display: none;
}

.sp-profile__summary::marker {
	content: "";
}

.sp-profile__summary:focus-visible {
	outline: var(--sp-border-accent);
	outline-offset: var(--sp-1);
}

.sp-profile__summary-title {
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 800;
	font-size: var(--sp-fs-20);
	line-height: var(--sp-lh-tight);
	text-transform: uppercase;
	color: var(--sp-text);
}

.sp-profile__summary-hint {
	font-family: var(--sp-font-body);
	font-size: var(--sp-fs-micro);
	letter-spacing: var(--sp-ls-label);
	text-transform: uppercase;
	color: var(--sp-text-45);
}

/* The same `+` / `−` the FAQ uses, drawn from the element's own open state. */
.sp-profile__summary-sign {
	flex: 0 0 auto;
	margin-left: auto;
	font-family: var(--sp-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--sp-fs-2xl);
	line-height: 1;
	color: var(--sp-red);
}

.sp-profile__summary-sign::before {
	content: "+";
}

/* U+2212 minus, not a hyphen. */
.sp-profile__company[open] .sp-profile__summary-sign::before {
	content: "−";
}

.sp-profile__summary:hover .sp-profile__summary-title {
	color: var(--sp-red);
}

.sp-profile__company-body {
	margin-top: var(--sp-7);
}

.sp-profile .sp-profile__company-intro {
	max-width: var(--sp-container-copy);
	margin: 0 0 var(--sp-7);
}

/* ============================================================== actions */

.sp-profile .sp-profile__actions {
	margin-top: var(--sp-11);
	padding-top: var(--sp-9);
	border-top: 1px solid var(--sp-line-card);
}