/**
 * Account pages and the student panel — /login/, /register/, /panel/
 *
 * Loads on top of style.css and uses the site's own primitives: .container,
 * .section, .card, .field, .badge, .empty-note and the .btn family through
 * zandi_button(). Only the handful of patterns that exist nowhere else live
 * here — the auth card, the details list, the licence block — so this is a set
 * of components, not a second design system.
 *
 * An earlier version of this file layered on courses.css and its cream palette.
 * That palette has since been folded back into the site, so the panel takes the
 * navy tokens directly and never loads the course stylesheet.
 *
 * Direction: logical properties only (padding-inline, margin-block,
 * text-align: start). No left/right anywhere, so the layout mirrors itself and
 * rtl.css needs no additions.
 */

/* ==========================================================================
   0. Clearing the header

   .site-header is position: fixed, so every page owes it that much space at the
   top or its first element sits underneath. The homepage pays it in .hero and
   the editorial templates in .page-hero; these pages pay it here.
   ========================================================================== */

.panel-page #main {
	padding-block-start: var(--header-height);
}

/* ==========================================================================
   0b. The ground under the auth pages

   The card used to sit at the top of a mist band on an otherwise empty screen,
   which on a laptop left most of the viewport blank below it. Centring it needs
   the band to own the height, not the card.

   The ornament is a guilloché nod — two very faint navy washes, no imagery. It
   is painted on a pseudo-element so it can never sit above the form, and it is
   dropped entirely below 64rem where there is no spare room for decoration.
   ========================================================================== */

.auth-ground {
	position: relative;
	overflow: hidden;
}

.auth-layout {
	display: grid;
	gap: 2rem;
	justify-items: center;
}

@media (min-width: 64rem) {
	.auth-ground {
		display: grid;
		align-items: center;
		min-block-size: calc(100vh - var(--header-height));
	}

	.auth-ground::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background:
			radial-gradient(38rem 38rem at 82% 12%, rgba(27, 54, 93, 0.05), transparent 62%),
			radial-gradient(30rem 30rem at 10% 92%, rgba(27, 54, 93, 0.04), transparent 60%);
		pointer-events: none;
	}

	.auth-ground > .container {
		position: relative;
		z-index: 1;
	}

	/*
	 * Card then aside. Source order already puts them this way round, so the
	 * grid only has to place them — no `order`, which would divorce the visual
	 * order from the tab order.
	 */
	.auth-layout {
		grid-template-columns: minmax(0, 27rem) minmax(0, 21rem);
		gap: 2.75rem;
		align-items: start;
		justify-items: stretch;
		justify-content: center;
		max-width: 54rem;
		margin-inline: auto;
	}
}

/* ==========================================================================
   1. Sign in / sign up
   ========================================================================== */

.auth {
	width: 100%;
	max-width: 27rem;
	margin-inline: auto;
}

.auth__card {
	box-shadow: var(--shadow-card);
}

/* .card is a flex column, so an inline-flex badge would stretch edge to edge. */
.auth__card > .badge,
.panel-welcome > .badge {
	align-self: flex-start;
}

.auth__title {
	margin-block-start: 1rem;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
	line-height: 1.4;
	font-weight: 700;
	color: var(--navy-700);
}

.auth__lead {
	margin-block-start: 0.6rem;
	color: var(--navy-500);
	font-size: 0.925rem;
	line-height: 1.9;
}

.auth__form {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	margin-block-start: 1.75rem;
}

.auth__check {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.875rem;
	color: var(--navy-500);
	cursor: pointer;
}

.auth__check input {
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--navy-700);
	cursor: pointer;
}

.auth__closed {
	margin-block: 1.5rem;
	padding: 1rem 1.15rem;
	border-radius: var(--radius-soft);
	background: var(--mist);
	border: 1px solid var(--hairline);
	font-size: 0.9rem;
	line-height: 1.9;
}

.auth__aside {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--hairline);
	font-size: 0.9rem;
	color: var(--navy-500);
}

.auth__aside a {
	color: var(--navy-700);
	font-weight: 700;
}

.auth__aside a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.auth__note {
	margin-block-start: 0.65rem;
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--navy-500);
}

.auth__note a:hover {
	color: var(--navy-700);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   1b. The OTP plugin's own form

   Digits renders its own markup inside .auth__provider. This block dresses it
   in the site's typeface, fields and buttons — and does no more than that.

   WHAT THIS FILE USED TO DO, AND WHY IT BROKE THE PAGE

   The first version matched on class-name substrings — [class*='dig'],
   [class*='tab'], [class*='digit'][class*='submit'] — and forced layout
   properties through them: `max-width: 100% !important`, `width: 100%`,
   `display: inline-flex`, `background` and `border-radius` on anything that
   matched. Digits' class names do not partition the way that assumes:

     - `digits_tab_content_mobile active` is a step *panel*, not the tab
       button. `[class*='tab'][class*='active']` painted it navy, which is the
       stray dark pill that appeared behind the phone field.
     - `digits_submit_wrapper` is a *container*, not the button.
       `[class*='digit'][class*='submit']` gave it the full-width navy pill,
       which is why a button appeared to bleed past the edge of the card.
     - Digits moves between steps with a translated track whose panels are
       wider than their container by design. `max-width: 100% !important` on
       every `dig*` element crushed that track, so panels overlapped.

   So the rules below follow two hard constraints:

     1. **Only real controls are styled** — `input`, `select`, `textarea`,
        `button`, `a`. Never a `div`, never a wrapper, never a class-substring
        match that could resolve to one.
     2. **No layout properties on anything the plugin owns.** No `display`,
        `position`, `float`, `transform`, `width` or `max-width` on Digits'
        elements. Colour, type, border, radius and spacing only. If a future
        Digits release rearranges its DOM, the worst case here is that a
        control keeps the plugin's own look — not that the page falls apart.

   The container is ours and is the one place layout is set, because it is the
   theme's own element.

   Digits also has a light form skin of its own: دیجیتس ← فرم‌ها ← «استایل فرم
   پیش‌فرض». Setting that to the light/minimal option makes most of this
   redundant, which is the intended end state — everything here is written to
   be harmless if the plugin already looks right.
   ========================================================================== */

.auth__provider {
	margin-block-start: 1.75rem;

	/*
	 * The one layout guard, and it is on the theme's own element rather than
	 * the plugin's. Digits' country dropdown and step track are both wider
	 * than the card on a 360px screen; without this the whole page gets a
	 * horizontal scrollbar, which on an RTL layout scrolls the wrong way and
	 * reads as the site being broken.
	 */
	max-width: 100%;
	overflow-x: clip;
}

/* Typeface only. Everything else about the plugin's own boxes is left alone. */
.auth__provider,
.auth__provider input,
.auth__provider select,
.auth__provider textarea,
.auth__provider button {
	font-family: inherit;
}

/*
 * Neutralise the plugin's surfaces so the theme's white card shows through.
 *
 * Digits ships a dark form skin in some configurations — navy panels, white
 * text — and dropped into a white card on a light page that reads as a
 * different website pasted into ours. This is the one rule that still sweeps
 * broadly, and it is safe to, because it sets **only colour**: no `display`,
 * no `width`, no `position`. A wrapper that loses its background keeps its
 * geometry, so the step track and the field rows still lay out exactly as the
 * plugin intends. That is the distinction the previous version missed.
 *
 * Element selectors, so it can never reach an input, a select or a button —
 * those are given their surfaces back deliberately further down.
 */
.panel-page .auth__provider div,
.panel-page .auth__provider span,
.panel-page .auth__provider p,
.panel-page .auth__provider ul,
.panel-page .auth__provider li,
.panel-page .auth__provider form,
.panel-page .auth__provider section,
.panel-page .auth__provider fieldset {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	color: var(--ink);
}

/*
 * Links are neutralised too, and they have to be as a pair with the colour
 * rule at the end of this block. Digits paints some of its links as filled
 * pills — «استفاده از موبایل» is one — and recolouring their text to navy
 * without also clearing the fill gives navy text on a navy pill, which is an
 * invisible label. Either both or neither; both, because a flat link in the
 * site's navy is legible whatever skin the plugin is on.
 */
.panel-page .auth__provider a {
	background-color: transparent;
	background-image: none;
	box-shadow: none;
}

/*
 * Digits' own messages — «کد اشتباه است», «کد ارسال شد».
 *
 * The sweep above strips every wrapper's background, and a message banner is a
 * wrapper, so without this a failed code arrives as plain body text and reads
 * as though nothing happened. This is the one place a class-substring match is
 * still used, and it is safe here for the same reason the sweep is: it sets
 * colour and spacing only, never geometry. `:not(input):not(button)` keeps it
 * off controls whose names happen to contain the word.
 */
.panel-page .auth__provider [class*='error']:not(input):not(button),
.panel-page .auth__provider [class*='msg']:not(input):not(button),
.panel-page .auth__provider [class*='notice']:not(input):not(button) {
	margin-block-start: 0.85rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--rouge-100);
	border-radius: var(--radius-soft);
	background-color: var(--rouge-50);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.7;
	color: var(--rouge-600);
}

/*
 * Digits prints its own «ورود» / «عضویت» heading directly under the theme's
 * «خوش برگشتی» / «حسابت رو بساز». Two headings stacked is worse than either,
 * so the plugin's is demoted rather than hidden — later steps use the same
 * element to say «تایید شماره موبایل», which must stay readable.
 */
.auth__provider h1,
.auth__provider h2,
.auth__provider h3,
.auth__provider h4 {
	margin-block-end: 0.9rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-700);
	text-align: start;
}

/*
 * The «محافظت شده توسط digits» badge.
 *
 * Digits has its own switch for this — دیجیتس ← فرم‌ها ← تنظیمات اصلی ←
 * «نمایش متن محافظت شده توسط دیجیتس». Turning that off is the right fix,
 * because it removes the markup instead of hiding it. This is the backstop for
 * when the setting is missed, matched on the vendor's own URL so it survives a
 * class rename.
 */
.auth__provider a[href*='unitedover'],
.auth__provider a[href*='digits.'],
.auth__provider img[src*='digit'] {
	display: none;
}

/*
 * Fields.
 *
 * `.panel-page` on the front is for weight against the plugin's own sheet,
 * which loads after the theme's. Attribute selectors on the input type mean
 * this can only ever reach a real control.
 */
.panel-page .auth__provider input[type='text'],
.panel-page .auth__provider input[type='tel'],
.panel-page .auth__provider input[type='email'],
.panel-page .auth__provider input[type='number'],
.panel-page .auth__provider input[type='password'],
.panel-page .auth__provider input:not([type]),
.panel-page .auth__provider select,
.panel-page .auth__provider textarea {
	min-block-size: 3rem;
	box-sizing: border-box;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-soft);
	background-color: #fff;
	padding: 0.8rem 1rem;
	line-height: 1.6;

	/*
	 * 16px, not 0.95rem. Mobile Safari zooms the viewport whenever a focused
	 * input is smaller than that, and the phone field is the first thing a
	 * student touches — so the page jumped at the worst possible moment.
	 */
	font-size: 1rem;
	color: var(--ink);
}

.panel-page .auth__provider input::placeholder,
.panel-page .auth__provider textarea::placeholder {
	color: var(--navy-300);

	/*
	 * Digits' phone placeholder is «۹۱۲ ۳۴۵ ۶۷۸۹» and the OTP field's is a
	 * word. Neither should be justified — an earlier build stretched
	 * «تایید پیامک» across the whole field, letter by letter, because the
	 * plugin's own rule set `text-align: justify` on the input.
	 */
	text-align: start;
	letter-spacing: normal;
}

/*
 * Focus.
 *
 * Digits sets `outline: none` and marks focus with a one-pixel border-colour
 * change, which against the resting border is a hue shift and fails WCAG
 * 2.4.11. This ring matches .field__control:focus in style.css, so a keyboard
 * user sees the same indicator on the plugin's form as on the theme's.
 */
.panel-page .auth__provider input:focus,
.panel-page .auth__provider select:focus,
.panel-page .auth__provider textarea:focus,
.panel-page .auth__provider button:focus-visible,
.panel-page .auth__provider a:focus-visible {
	border-color: var(--navy-400);
	outline: none;
	box-shadow: 0 0 0 3px rgba(53, 87, 138, 0.25);
}

/*
 * The OTP code field.
 *
 * Latin or Persian, the code is a number and must not be mirrored by the RTL
 * context. It is also the most important input in the flow — a student is
 * copying digits off a notification under time pressure — so it gets more room
 * than an ordinary field. Matched on `one-time-code`, which is the autocomplete
 * token every OTP plugin sets and browsers rely on to offer the code from SMS.
 */
.panel-page .auth__provider input[autocomplete='one-time-code'],
.panel-page .auth__provider input[name*='otp'],
.panel-page .auth__provider input[name*='code'] {
	direction: ltr;
	text-align: center;
	letter-spacing: 0.3em;
	min-block-size: 3.5rem;
	font-size: 1.25rem;
	font-weight: 700;
}

/* Spinner arrows are noise on a code field and shrink the tap target. */
.panel-page .auth__provider input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.panel-page .auth__provider input[type='number']::-webkit-outer-spin-button,
.panel-page .auth__provider input[type='number']::-webkit-inner-spin-button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* Checkbox rows — «مرا به خاطر بسپار» and anything like it. */
.panel-page .auth__provider input[type='checkbox'],
.panel-page .auth__provider input[type='radio'] {
	min-block-size: 0;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	margin-inline-end: 0.45rem;
	padding: 0;
	border: 1px solid var(--hairline-strong);
	border-radius: 0.25rem;
	accent-color: var(--navy-700);
	vertical-align: middle;
}

.panel-page .auth__provider label {
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--ink);
}

/*
 * The submit button.
 *
 * `button` and `input[type=submit]` only — never a class-substring match,
 * which is how a wrapper `div` ended up wearing this and bleeding past the
 * card. `box-sizing` and `max-inline-size` are here because the button is a
 * real control the theme is entitled to size, and without them Digits' own
 * horizontal padding pushed it wider than its container.
 */
.panel-page .auth__provider button[type='submit'],
.panel-page .auth__provider input[type='submit'],
.panel-page .auth__provider button:not([type]) {
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 3.25rem;
	margin-block-start: 1.15rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: var(--radius-pill);
	background-color: var(--navy-700);
	color: #fff;
	font-size: 0.975rem;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.25s var(--ease-premium);
}

.panel-page .auth__provider button[type='submit']:hover,
.panel-page .auth__provider input[type='submit']:hover,
.panel-page .auth__provider button:not([type]):hover {
	background-color: var(--navy-800);
}

/*
 * Secondary controls — «ارسال دوباره کد», «تغییر شماره», and Digits' own
 * cross-link between its login and signup steps.
 *
 * `type="button"` is what Digits gives these, so the submit rule above cannot
 * reach them and they would otherwise be bare text with no tap target.
 */
.panel-page .auth__provider button[type='button'] {
	inline-size: auto;
	min-block-size: 2.75rem;
	padding-inline: 0.9rem;
	border: 1px solid var(--hairline-strong);
	border-radius: var(--radius-pill);
	background: transparent;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--navy-500);
	cursor: pointer;
}

.panel-page .auth__provider button[type='button']:hover {
	color: var(--navy-700);
	background: var(--mist);
}

/* Digits' own inline links, including the one that switches step. */
.panel-page .auth__provider a {
	color: var(--navy-700);
	font-weight: 700;
}

.panel-page .auth__provider a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   1c. Digits' body-level furniture

   Two of Digits' elements are NOT inside .auth__provider — it appends them to
   the end of <body>:

       <div id="digits_country_list_wrapper"></div>
       <div class="dig_load_overlay"></div>

   So every rule above misses them, which is why the country dropdown rendered
   unstyled and the submit button painted straight over it. These are scoped to
   the .panel-page body class, which is as tight as it can be while still
   reaching them.
   ========================================================================== */

/*
 * The dropdown must sit above the card. .card is position: relative, so
 * without a stacking order of its own the list loses to anything painted
 * after it.
 */
.panel-page #digits_country_list_wrapper {
	z-index: 9999;

	/*
	 * Digits positions this with JavaScript against the country selector. On a
	 * 360px screen a fixed width placed from the inline-start edge runs off the
	 * viewport and gives the page a horizontal scrollbar. Capping it cannot
	 * break the desktop case, where the list is far narrower than the viewport.
	 */
	max-width: calc(100vw - 2rem);
}

.panel-page #digits_country_list_wrapper li {
	padding: 0.5rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.9;
	cursor: pointer;
}

.panel-page #digits_country_list_wrapper li:hover {
	background: var(--mist);
}

/*
 * The loading overlay must cover the page, not sit under the header — and it
 * should read as this site pausing rather than a plugin taking over, so it
 * gets the theme's own mist instead of whatever Digits ships.
 */
.panel-page .dig_load_overlay {
	z-index: 9998;
	background-color: rgba(244, 246, 248, 0.72);
	backdrop-filter: blur(2px);
}

.auth__note--standalone {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--hairline);
}

.auth__errors {
	margin-block-start: 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius-soft);
	background: var(--rouge-50);
	border: 1px solid var(--rouge-100);
}

.auth__errors ul {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--rouge-600);
}

/*
 * Honeypot. Off-screen rather than display:none — some bots skip hidden inputs
 * but fill anything in the DOM. aria-hidden and tabindex="-1" in the markup keep
 * it away from people using a keyboard or a screen reader.
 */
.auth__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ==========================================================================
   1d. Fields on the auth pages

   Two corrections to the shared .field primitive, both scoped to .panel-page so
   nothing else on the site shifts underneath them.
   ========================================================================== */

/*
 * 16px minimum on every control.
 *
 * .field__control is 0.95rem = 15.2px, and mobile Safari zooms the whole page
 * whenever a focused input is under 16px — on a phone-number field that is the
 * first thing a student touches, so the page jumps at exactly the wrong moment.
 * There is no way to opt out short of blocking pinch-zoom, which is worse.
 *
 * The same 15.2px is used by the booking form on the homepage; that one is left
 * alone here because it belongs to a different piece of work.
 */
.panel-page .field__control {
	font-size: 1rem;
}

/*
 * The toggle sits inside the input, so the input needs room for it.
 *
 * The wrapper carries `dir="ltr"` in the markup, matching the password input it
 * holds. That is not decoration — `inset-inline-end` resolves against the
 * element's OWN direction, so an RTL wrapper would anchor the button to the
 * left edge while the LTR input reserved its padding on the right, and a typed
 * password would run underneath the button. One direction across both, and the
 * two agree whichever way the document is set.
 */
.field__wrap {
	position: relative;
	display: block;
}

.field__control--with-toggle {
	padding-inline-end: 4.25rem;
}

/*
 * Hidden until a script is confirmed present. `no-js` is swapped off <html>
 * before first paint, so this never flashes — and with JS off the button is
 * simply not there rather than being there and doing nothing.
 */
.no-js .field__toggle {
	display: none;
}

.field__toggle {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0.35rem;
	transform: translateY(-50%);
	min-height: 2.25rem;
	padding-inline: 0.7rem;
	border: 0;
	border-radius: var(--radius-soft);
	background: transparent;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--navy-500);
	cursor: pointer;
	transition: color 0.25s var(--ease-premium), background-color 0.25s var(--ease-premium);
}

.field__toggle:hover {
	background: var(--mist);
	color: var(--navy-700);
}

/*
 * The per-field message. Rendered before .field__hint in the markup so the
 * failure is read first, and .field is a column flex box, so it lands directly
 * under the input without any ordering rules.
 */
.field__error {
	font-size: 0.8125rem;
	line-height: 1.7;
	font-weight: 600;
	color: var(--rouge-600);
}

.field--invalid .field__control {
	border-color: var(--rouge-500);
}

.field--invalid .field__control:focus {
	border-color: var(--rouge-600);
	box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}

/* Colour alone must not be the signal — WCAG 1.4.1. */
.field--invalid .field__label::after {
	content: ' •';
	color: var(--rouge-600);
}

/*
 * Submitted, waiting on the server. Set by theme.js only after the browser has
 * accepted the fields, so a form that failed validation never lands here.
 */
.auth__form.is-busy [type='submit'] {
	opacity: 0.65;
	cursor: progress;
}

.auth__errors {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.auth__errors__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 1.35rem;
	block-size: 1.35rem;
	margin-block-start: 0.1rem;
	border-radius: 50%;
	background: var(--rouge-600);
	color: #fff;
}

.auth__errors__icon svg {
	inline-size: 0.8rem;
	block-size: 0.8rem;
}

/* ==========================================================================
   1e. The reassurance column

   Deliberately not a .card. Two cards side by side would read as two equal
   choices; this is quieter than the form and stays subordinate to it.
   ========================================================================== */

.auth-aside {
	width: 100%;
	max-width: 27rem;
}

@media (min-width: 64rem) {
	.auth-aside {
		max-width: none;
		padding-block-start: 1rem;
	}
}

.auth-aside__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-700);
}

.auth-aside__list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-block-start: 1.25rem;
	padding: 0;
	list-style: none;
}

.auth-aside__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
}

.auth-aside__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: var(--radius-soft);
	background: #fff;
	border: 1px solid var(--hairline);
	color: var(--navy-700);
}

.auth-aside__icon svg {
	inline-size: 1.1rem;
	block-size: 1.1rem;
}

.auth-aside__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.auth-aside__label {
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-700);
}

.auth-aside__body {
	font-size: 0.85rem;
	line-height: 1.9;
	color: var(--navy-500);
}

.auth-aside__note {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--hairline);
	font-size: 0.8125rem;
	line-height: 1.9;
	color: var(--navy-500);
}

.auth-aside__help {
	margin-block-start: 0.85rem;
}

.auth-aside__help a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 2.75rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--navy-700);
}

.auth-aside__help a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.auth-aside__help svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
}

/* ==========================================================================
   2. Panel — greeting
   ========================================================================== */

.panel-welcome {
	padding-block: 3rem 0.5rem;
}

.panel-welcome__title {
	margin-block-start: 1rem;
	font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem);
	line-height: 1.4;
	font-weight: 700;
	color: var(--navy-700);
}

.panel-welcome__lead {
	margin-block-start: 0.6rem;
	color: var(--navy-500);
	font-size: 0.95rem;
}

.panel-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
}

.panel-tabs a {
	padding: 0.5rem 0.95rem;
	border-radius: var(--radius-pill);
	background: #fff;
	border: 1px solid var(--hairline-strong);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--navy-500);
	transition: color 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium);
}

.panel-tabs a:hover {
	color: var(--navy-700);
	border-color: var(--navy-400);
}

/* ==========================================================================
   3. Panel — sections and cards
   ========================================================================== */

.panel-section {
	padding-block: 2rem;
	scroll-margin-top: 7rem;
}

.panel-section__title {
	margin-block-end: 1.25rem;
	font-size: 1.25rem;
	line-height: 1.6;
	font-weight: 700;
	color: var(--navy-700);
}

.panel-card {
	align-items: flex-start;
	gap: 1rem;
	line-height: 1.9;
}

.panel-card__note {
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--navy-500);
}

.panel-empty__action {
	margin-block-start: 1.25rem;
}

/* ==========================================================================
   4. Panel — courses
   ========================================================================== */

.panel-courses {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.panel-course {
	gap: 1rem;
}

.panel-course__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.panel-course__title {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--navy-700);
}

.panel-course__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: auto;
}

.panel-licence {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-soft);
	background: var(--mist);
	border: 1px solid var(--hairline);
}

.panel-licence__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--navy-500);
}

.panel-licence__key {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--ink);
	word-break: break-all;
	text-align: start;
}

/* ==========================================================================
   5. Panel — account details
   ========================================================================== */

.panel-details {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
	margin: 0;
}

.panel-details__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	padding-block-end: 0.85rem;
	border-block-end: 1px solid var(--hairline);
}

.panel-details__row:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.panel-details dt {
	font-size: 0.85rem;
	color: var(--navy-500);
}

.panel-details dd {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--navy-700);
	text-align: start;
}

.panel-details__empty {
	font-weight: 400;
	color: var(--navy-400);
}

/* A number typed left-to-right still reads from the start edge of an RTL row. */
.panel-page .field__control[dir='ltr'],
.panel-details dd[dir='ltr'] {
	text-align: start;
}