/**
 * Orbit plugin styles.
 *
 * Minimal, theme-friendly defaults. Uses CSS custom properties so themes
 * can override colors, spacing, and typography by redefining the variables.
 *
 * @package Orbit
 */

/* ---- Variables ---- */

:root {
	/*
	 * Each variable references the active theme's preset CSS custom properties
	 * with a fallback to the design-system value used by the Perihelion theme.
	 * On a Perihelion-themed install, the theme's tokens flow through. On
	 * other themes, the fallbacks render a brand-aligned default.
	 */
	--orbit-color-primary:       var(--wp--preset--color--sienna,       #9C4B30);
	--orbit-color-primary-hover: var(--wp--preset--color--sienna-hover, #803D26);
	--orbit-color-muted:         var(--wp--preset--color--slate,        #5A5A55);
	--orbit-color-border:        var(--wp--preset--color--rule,         rgba(156, 75, 48, 0.15));
	--orbit-color-bg-light:      var(--wp--preset--color--paper-warm,   #F1ECE2);
	--orbit-color-text:          var(--wp--preset--color--ink,          #2A2A28);

	/*
	 * Notice / status colors map onto the design system's tinted-surface
	 * approach (no red, no signal-yellow). Body text on tinted bgs uses Ink
	 * for AA contrast.
	 */
	--orbit-color-success:       #5C6845;                                  /* darker sage */
	--orbit-color-warning:       #8B6420;                                  /* darker honey */
	--orbit-color-danger:        var(--wp--preset--color--sienna,       #9C4B30);
	--orbit-color-danger-hover:  var(--wp--preset--color--sienna-hover, #803D26);
	--orbit-color-bg-success:    rgba(157, 166, 126, 0.18);                /* sage tint */
	--orbit-color-bg-notice:     rgba(214, 154, 60, 0.15);                 /* honey tint */
	--orbit-color-bg-error:      rgba(156, 75, 48, 0.12);                  /* sienna tint */

	--orbit-radius:    8px;
	--orbit-radius-sm: 4px;
	--orbit-radius-lg: 12px;
	--orbit-spacing:    1rem;
	--orbit-spacing-sm: 0.5rem;
	--orbit-spacing-lg: 1.5rem;
	--orbit-font-size-sm: 0.875rem;

	--orbit-shadow-soft: 0 1px 3px rgba(42, 42, 40, 0.04), 0 2px 8px rgba(42, 42, 40, 0.04);
	--orbit-shadow-lift: 0 2px 6px rgba(42, 42, 40, 0.06), 0 8px 20px rgba(42, 42, 40, 0.06);
}

/* ---- CTA ---- */

.orbit-cta {
	margin-top: var(--orbit-spacing);
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

.orbit-cta a {
	font-weight: 500;
	color: var(--orbit-color-primary);
}

/* ---- Buttons ---- */

.orbit-btn {
	display: inline-block;
	padding: 0.5em 1.25em;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: #fff;
	background-color: var(--orbit-color-primary);
	border: 1px solid transparent;
	border-radius: var(--orbit-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.orbit-btn:hover,
.orbit-btn:focus {
	background-color: var(--orbit-color-primary-hover);
	color: #fff;
	text-decoration: none;
}

.orbit-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.orbit-btn-sm {
	padding: 0.3em 0.75em;
	font-size: var(--orbit-font-size-sm);
}

.orbit-btn-danger {
	background-color: var(--orbit-color-danger);
}

.orbit-btn-danger:hover,
.orbit-btn-danger:focus {
	background-color: var(--orbit-color-danger-hover);
}

.orbit-btn-active {
	box-shadow: inset 0 0 0 2px currentColor;
}

.orbit-btn-going.orbit-btn-active {
	background-color: var(--orbit-color-success);
}

.orbit-btn-maybe.orbit-btn-active {
	background-color: var(--orbit-color-warning);
}

/* Outline variant — used in the danger zone where we want a destructive
 * action that's clearly secondary to the main submit button. */
.orbit-btn-outline {
	background-color: transparent;
	color: var(--orbit-color-danger);
	border: 1px solid var(--orbit-color-danger);
}

.orbit-btn-outline:hover,
.orbit-btn-outline:focus {
	background-color: var(--orbit-color-bg-error);
	color: var(--orbit-color-danger-hover);
}

/* A text link styled to sit beside an `.orbit-btn` — used for "Cancel"
 * / "Back to Manage" affordances on form action rows. */
.orbit-btn-link {
	display: inline-block;
	padding: 0.5em 0.5em;
	color: var(--orbit-color-muted);
	font-size: var(--orbit-font-size-sm);
	text-decoration: none;
}

.orbit-btn-link:hover,
.orbit-btn-link:focus {
	color: var(--orbit-color-text);
	text-decoration: underline;
}

button.orbit-btn-link {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

.orbit-btn-link--danger {
	color: var(--orbit-color-danger);
}

.orbit-btn-link--danger:hover,
.orbit-btn-link--danger:focus {
	color: var(--orbit-color-danger-hover);
}

/* ---- Forms ---- */

.orbit-form {
	max-width: 40rem;
}

.orbit-form-group {
	margin-bottom: var(--orbit-spacing);
}

.orbit-form-group label {
	display: block;
	margin-bottom: 0.25em;
	font-weight: 500;
}

.orbit-form-group input[type="text"],
.orbit-form-group input[type="email"],
.orbit-form-group input[type="number"],
.orbit-form-group input[type="time"],
.orbit-form-group input[type="datetime-local"],
.orbit-form-group textarea,
.orbit-form-group select {
	display: block;
	width: 100%;
	padding: 0.5em 0.75em;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid var(--orbit-color-border);
	border-radius: var(--orbit-radius);
	background-color: #fff;
	box-sizing: border-box;
}

.orbit-form-group input:focus,
.orbit-form-group textarea:focus,
.orbit-form-group select:focus {
	outline: none;
	border-color: var(--orbit-color-primary);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.orbit-form-group input[type="checkbox"] {
	display: inline;
	width: auto;
	margin-right: 0.35em;
}

.orbit-help {
	margin-top: 0.25em;
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

/* Help text that follows a horizontally-laid-out setting row, indented
 * to align under the input rather than the label. */
.orbit-help--inset {
	margin-top: -0.25em;
	margin-bottom: var(--orbit-spacing);
}

/* Small "optional" / "required" tag pinned next to a section h2. */
.orbit-section-tag {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.5em;
	background-color: var(--orbit-color-bg-light);
	border-radius: var(--orbit-radius-sm);
	color: var(--orbit-color-muted);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	vertical-align: middle;
}

.orbit-form-required-note {
	margin: 0 0 var(--orbit-spacing);
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

.orbit-required-mark {
	color: var(--orbit-color-primary);
}

.orbit-checkbox-label {
	display: block;
	margin-top: 0.5em;
	font-weight: normal;
}

.orbit-form-static-value {
	margin: 0.25em 0 0;
	padding: 0.5em 0.75em;
	background-color: var(--orbit-color-bg-light);
	border: 1px dashed var(--orbit-color-border);
	border-radius: var(--orbit-radius);
	color: var(--orbit-color-text);
}

.orbit-form-actions {
	display: flex;
	align-items: center;
	gap: var(--orbit-spacing-sm);
	margin-top: var(--orbit-spacing);
}

/* Read-only input + Copy button row, used for share-link display. */
.orbit-share-link-row {
	display: flex;
	gap: var(--orbit-spacing-sm);
	align-items: stretch;
}

.orbit-share-link-input {
	flex: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: var(--orbit-font-size-sm);
}

.orbit-danger-zone {
	max-width: 40rem;
	margin-top: calc(var(--orbit-spacing) * 2);
	padding: var(--orbit-spacing);
	border: 1px dashed var(--orbit-color-danger);
	border-radius: var(--orbit-radius);
	background-color: var(--orbit-color-bg-error);
}

.orbit-danger-zone h2 {
	margin: 0 0 var(--orbit-spacing-sm);
	font-size: 1rem;
	color: var(--orbit-color-danger);
}

.orbit-danger-zone p {
	margin: 0 0 var(--orbit-spacing);
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-text);
}

/* ---- Phone Verification ---- */

.orbit-phone-verification {
	margin-bottom: calc(var(--orbit-spacing) * 1.5);
	padding-bottom: var(--orbit-spacing);
	border-bottom: 1px solid var(--orbit-color-border);
}

.orbit-phone-verified {
	padding: 0.75em 1em;
	margin: var(--orbit-spacing-sm) 0;
	background-color: var(--orbit-color-bg-light);
	border-radius: var(--orbit-radius);
}

.orbit-phone-current {
	margin: 0 0 0.5em;
}

.orbit-verified-badge {
	display: inline-block;
	padding: 0.15em 0.55em;
	margin-right: 0.4em;
	font-size: var(--orbit-font-size-sm);
	font-weight: 600;
	color: var(--orbit-color-success);
	border: 1px solid var(--orbit-color-success);
	border-radius: var(--orbit-radius);
}

.orbit-code-sent-msg {
	margin: 0 0 var(--orbit-spacing-sm);
}

.orbit-code-form input[name="code"] {
	max-width: 10em;
	letter-spacing: 0.3em;
	font-size: 1.2em;
	text-align: center;
}

/* ---- Subscription Status ---- */

.orbit-subscription-status {
	display: flex;
	align-items: center;
	gap: var(--orbit-spacing-sm);
}

.orbit-subscribed-badge {
	display: inline-block;
	padding: 0.2em 0.6em;
	font-size: var(--orbit-font-size-sm);
	font-weight: 500;
	color: var(--orbit-color-success);
	border: 1px solid var(--orbit-color-success);
	border-radius: var(--orbit-radius);
}

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

.orbit-message {
	padding: 0.75em 1em;
	margin-top: var(--orbit-spacing-sm);
	border-radius: var(--orbit-radius);
	font-size: var(--orbit-font-size-sm);
}

.orbit-message-success {
	background-color: var(--orbit-color-bg-success);
	color: var(--orbit-color-text);
	border: 1px solid transparent;
}

.orbit-message-error {
	background-color: var(--orbit-color-bg-error);
	color: var(--orbit-color-text);
	border-left: 3px solid var(--orbit-color-primary);
	border-radius: 0 var(--orbit-radius) var(--orbit-radius) 0;
}

/* ---- Notices ---- */

.orbit-notice {
	padding: 0.75em 1em;
	margin-bottom: var(--orbit-spacing);
	background-color: var(--orbit-color-bg-notice);
	border-left: 3px solid var(--orbit-color-warning);
	border-radius: 0 var(--orbit-radius) var(--orbit-radius) 0;
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-text);
}

.orbit-notice a {
	font-weight: 500;
}

.orbit-notice-warning {
	background-color: var(--orbit-color-bg-notice);
	border-color: var(--orbit-color-warning);
	color: var(--orbit-color-text);
}

.orbit-login-prompt {
	padding: 1.5em;
	text-align: center;
	color: var(--orbit-color-muted);
}

/* ---- Cards ---- */

/* Generic card surface — paper-warm bg, soft shadow, inviting padding.
 * Used for activity cards on the dashboard / profile pages, and as the
 * primitive for `manage`, `my-subscriptions`, and `subscribers` lists
 * (which used to be utilitarian tables). All three list pages share
 * this card style so the auth surface reads consistently. */
.orbit-card,
.orbit-dashboard .orbit-activity-card,
.orbit-profile .orbit-activity-card {
	padding: var(--orbit-spacing-lg);
	margin-bottom: var(--orbit-spacing);
	background-color: var(--orbit-color-bg-light);
	border: 1px solid var(--orbit-color-border);
	border-radius: var(--orbit-radius-lg);
	box-shadow: var(--orbit-shadow-soft);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.orbit-card:hover,
.orbit-dashboard .orbit-activity-card:hover,
.orbit-profile .orbit-activity-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--orbit-shadow-lift);
}

/* Card list wrapper — vertical stack of cards. */
.orbit-card-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--orbit-spacing);
}

/* Top meta row inside a card — name/title at left, status badge at right. */
.orbit-card__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--orbit-spacing-sm);
	flex-wrap: wrap;
}

.orbit-card__title {
	margin: 0;
	font-size: 1.25rem;
}

.orbit-card__title a {
	color: inherit;
	text-decoration: none;
}

.orbit-card__title a:hover,
.orbit-card__title a:focus {
	text-decoration: underline;
}

/* Secondary card lines — date, location, note, since. Muted slate. */
.orbit-card__meta {
	margin: 0.4em 0 0;
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

.orbit-card__meta + .orbit-card__meta {
	margin-top: 0.25em;
}

/* Optional connection note / quote line in a card. */
.orbit-card__note {
	margin: 0.6em 0 0;
	font-style: italic;
	color: var(--orbit-color-text);
}

/* Action row at the bottom of a card — buttons / links right-aligned. */
.orbit-card__actions {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--orbit-spacing-sm);
	margin-top: var(--orbit-spacing);
	padding-top: var(--orbit-spacing-sm);
	border-top: 1px solid var(--orbit-color-border);
}

.orbit-card--cancelled,
.orbit-card--past {
	opacity: 0.85;
}

.orbit-card--cancelled .orbit-card__title,
.orbit-card--past .orbit-card__title {
	color: var(--orbit-color-muted);
}

.orbit-dashboard .orbit-activity-card--mine {
	border-left: 3px solid var(--orbit-color-primary);
}

.orbit-poster-name--mine {
	color: var(--orbit-color-primary);
	font-weight: 500;
}

a.orbit-poster-name {
	color: inherit;
	text-decoration: none;
}

a.orbit-poster-name:hover,
a.orbit-poster-name:focus {
	text-decoration: underline;
}

.orbit-activity-date--undated {
	font-style: italic;
	opacity: 0.75;
}

.orbit-activity-meta {
	display: flex;
	align-items: center;
	gap: var(--orbit-spacing-sm);
	margin-bottom: 0.25em;
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

/* Card-level activity title — used inside `.orbit-activity-card` on
 * the dashboard and the public profile's "Recent Activities" list.
 * Scoped to h3 so the activity detail page's h1.orbit-activity-title
 * keeps its h1 size from theme.json. */
h3.orbit-activity-title {
	margin: 0.25em 0;
	font-size: 1.125rem;
}

.orbit-activity-title a {
	color: inherit;
	text-decoration: none;
}

.orbit-activity-title a:hover {
	text-decoration: underline;
}

.orbit-activity-date,
.orbit-activity-location {
	margin: 0.25em 0;
	font-size: var(--orbit-font-size-sm);
	color: var(--orbit-color-muted);
}

.orbit-response-counts {
	margin: 0.5em 0 0;
	font-size: var(--orbit-font-size-sm);
	font-weight: 500;
}

.orbit-my-response {
	margin: 0.25em 0 0;
	font-size: var(--orbit-font-size-sm);
	font-weight: 500;
	color: var(--orbit-color-success);
}

.orbit-btn-retract {
	background-color: transparent;
	color: var(--orbit-color-muted);
	border: 1px solid var(--orbit-color-border);
}

.orbit-btn-retract:hover,
.orbit-btn-retract:focus {
	background-color: var(--orbit-color-bg-light);
	color: var(--orbit-color-muted);
}

/* ---- Tier Badges ---- */

.orbit-tier-badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-radius: var(--orbit-radius-sm);
}

/* Tier 1 — "Just an idea": sage-tinted surface */
.orbit-tier-1 {
	background-color: var(--orbit-color-bg-success);
	color: var(--orbit-color-success);
}

/* Tier 2 — "I'll go if you will": sienna-tinted surface */
.orbit-tier-2 {
	background-color: var(--orbit-color-bg-error);
	color: var(--orbit-color-primary);
}

/* Tier 3 — "I'm going — join me": honey-tinted surface */
.orbit-tier-3 {
	background-color: var(--orbit-color-bg-notice);
	color: var(--orbit-color-warning);
}

/* ---- Activity Detail ---- */

.orbit-activity-detail {
	max-width: 40rem;
}

.orbit-activity-detail h1 {
	margin-top: 0.25em;
}

.orbit-activity-description {
	margin: var(--orbit-spacing) 0;
	line-height: 1.7;
}

.orbit-activity-audience {
	margin: var(--orbit-spacing) 0;
	padding: 0.75em 1em;
	border-left: 3px solid var(--orbit-color-primary);
	background-color: var(--orbit-color-bg-light);
	line-height: 1.6;
}

.orbit-activity-audience-label {
	margin: 0 0 0.25em;
	font-size: var(--orbit-font-size-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--orbit-color-muted);
}

.orbit-activity-audience p:last-child {
	margin-bottom: 0;
}

.orbit-activity-url {
	margin: var(--orbit-spacing) 0;
}

.orbit-btn-link {
	background-color: transparent;
	color: var(--orbit-color-primary);
	border: 2px solid var(--orbit-color-primary);
}

.orbit-btn-link:hover,
.orbit-btn-link:focus {
	background-color: var(--orbit-color-primary);
	color: #fff;
}

.orbit-poster-link {
	margin-bottom: 0.25em;
	font-size: var(--orbit-font-size-sm);
}

.orbit-location-address {
	color: var(--orbit-color-muted);
	font-size: var(--orbit-font-size-sm);
}

.orbit-responses-summary {
	display: flex;
	gap: var(--orbit-spacing);
	margin: var(--orbit-spacing) 0;
	font-weight: 500;
}

.orbit-attendee-list {
	list-style: none;
	padding: 0;
	margin: var(--orbit-spacing-sm) 0 var(--orbit-spacing);
}

.orbit-attendee-list li {
	padding: 0.35em 0;
	border-bottom: 1px solid var(--orbit-color-border);
	font-size: var(--orbit-font-size-sm);
}

.orbit-response-buttons {
	display: flex;
	gap: var(--orbit-spacing-sm);
	margin: var(--orbit-spacing-lg) 0;
}

.orbit-past-notice {
	margin: var(--orbit-spacing) 0;
	color: var(--orbit-color-muted);
	font-style: italic;
}

/* ---- Tables ---- */

.orbit-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--orbit-font-size-sm);
}

.orbit-table th,
.orbit-table td {
	padding: 0.6em 0.75em;
	text-align: left;
	border-bottom: 1px solid var(--orbit-color-border);
}

.orbit-table th {
	font-weight: 600;
	background-color: var(--orbit-color-bg-light);
}

.orbit-table tr:hover td {
	background-color: var(--orbit-color-bg-light);
}

/* ---- Manage page table extras ---- */

.orbit-manage__actions {
	white-space: nowrap;
}

.orbit-manage__actions a,
.orbit-manage__actions .orbit-link-button {
	font-size: var(--orbit-font-size-sm);
	margin-right: 0.5em;
}

/* Inline status badge alongside the title in the manage table. */
.orbit-status-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.55em;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: var(--orbit-radius-sm);
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1;
}

.orbit-status-cancelled {
	background-color: var(--orbit-color-bg-error);
	color: var(--orbit-color-primary);
}

.orbit-status-past {
	background-color: var(--orbit-color-bg-light);
	color: var(--orbit-color-muted);
}

.orbit-status-approved {
	background-color: var(--orbit-color-bg-success);
	color: var(--orbit-color-success);
}

.orbit-status-pending {
	background-color: var(--orbit-color-bg-notice);
	color: var(--orbit-color-warning);
}

/* Page-level intro paragraph below an h1 — sets context for the
 * page before the user dives into a table or form. Echoes the
 * marketing-site tagline treatment (Fraunces italic in slate at lead
 * size) so the auth surface feels of-a-piece with the homepage. */
.orbit-page-intro {
	margin: 0.5em 0 var(--orbit-spacing-lg);
	color: var(--wp--preset--color--slate, var(--orbit-color-muted));
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--lead, 1.1875rem);
	font-style: italic;
	line-height: 1.4;
	max-width: 40rem;
}

/* The first heading on an app-page shortcode anchors the page header.
 * Tighten its bottom margin so the .orbit-page-intro that follows
 * reads as a kerned subhead, not a separate paragraph. */
[class^="orbit-"] > h1:first-child,
[class^="orbit-"] > h1.orbit-profile-name,
[class^="orbit-"] > h1.orbit-activity-title {
	margin-top: 0;
	margin-bottom: 0.1em;
}

/* Compact summary line above a data table (e.g. "3 approved · 1 pending"). */
.orbit-table-summary {
	margin: 0 0 var(--orbit-spacing-sm);
	color: var(--orbit-color-muted);
	font-size: var(--orbit-font-size-sm);
}

/* A button that visually reads as a link — used for in-row Cancel
 * actions where matching the adjacent Edit anchor's appearance keeps
 * the row tidy. */
.orbit-link-button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--orbit-color-primary);
	cursor: pointer;
	text-decoration: underline;
}

.orbit-link-button:hover,
.orbit-link-button:focus {
	color: var(--orbit-color-primary-hover);
}

/* ---- Profile ---- */

.orbit-profile .orbit-profile-name {
	margin: 0 0 var(--orbit-spacing-sm);
}

/* The bio sits directly under the profile name h1. Styled like the
 * marketing tagline (Fraunces italic in slate at lead size) so it
 * reads as a sub-heading rather than as just another paragraph. */
.orbit-profile .orbit-bio {
	margin: 0 0 var(--orbit-spacing-lg);
	color: var(--wp--preset--color--slate, var(--orbit-color-muted));
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: var(--wp--preset--font-size--lead, 1.1875rem);
	font-style: italic;
	line-height: 1.4;
	max-width: 40rem;
}

.orbit-notice-owner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--orbit-spacing-sm);
	margin: var(--orbit-spacing) 0;
	padding: 0.65em 0.85em;
	background-color: var(--orbit-color-bg-light);
	border-left: 3px solid var(--orbit-color-primary);
	border-radius: 0 var(--orbit-radius) var(--orbit-radius) 0;
	font-size: var(--orbit-font-size-sm);
}

.orbit-notice-owner__tag {
	color: var(--orbit-color-muted);
}

/* ---- Subscribe Form ---- */

.orbit-subscribe-form {
	max-width: 30rem;
}

.orbit-share-link code {
	display: inline-block;
	padding: 0.3em 0.6em;
	background-color: var(--orbit-color-bg-light);
	border: 1px solid var(--orbit-color-border);
	border-radius: var(--orbit-radius);
	font-size: var(--orbit-font-size-sm);
	word-break: break-all;
}

/* ---- Settings ---- */

.orbit-settings {
	max-width: 36rem;
}

/* Each tier-preference row sits as a label-input pair, vertically
 * spaced to give them breathing room rather than crowding into a
 * spreadsheet. */
.orbit-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--orbit-spacing);
	padding: var(--orbit-spacing-sm) 0;
	border-bottom: 1px solid var(--orbit-color-border);
}

.orbit-setting-row:first-of-type {
	border-top: 1px solid var(--orbit-color-border);
}

.orbit-setting-row label {
	font-weight: 500;
	white-space: nowrap;
}

.orbit-setting-row select,
.orbit-setting-row input {
	min-width: 9rem;
	padding: 0.45em 0.7em;
	border: 1px solid var(--orbit-color-border);
	border-radius: var(--orbit-radius);
	font-size: var(--orbit-font-size-sm);
	background-color: #fff;
}

.orbit-settings-form .orbit-btn,
.orbit-settings-form .orbit-form-actions {
	margin-top: var(--orbit-spacing-lg);
}

/* Section separator between the phone-verification block and the
 * notification preferences. The phone block already has a dashed
 * bottom border via .orbit-phone-verification, which provides the
 * structural break — no additional spacing needed here, but tighten
 * the H2 below it. */
.orbit-settings h2 {
	margin-top: var(--orbit-spacing-lg);
}