@charset "UTF-8";

/*
 * Pages that the component layer does not cover: guest screens, organizations, invitations.
 * Load after tokens.css and components.css. Colors come from semantic tokens only.
 */

.avatar-small { inline-size: 28px; block-size: 28px; font-size: var(--text-xs); }
.logout-button { color: var(--nav-text-muted); }
.inline-form .input { inline-size: auto; min-inline-size: 110px; min-block-size: var(--control-sm); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.main-content > .form-actions { margin-block-end: var(--space-4); }
.error-action { margin-block-start: var(--space-4); }
.details-panel { margin-block-start: var(--space-3); }
.details-panel summary { color: var(--color-link); font-size: var(--text-sm); cursor: pointer; }
.details-panel[open] summary { margin-block-end: var(--space-3); }

.organization-card { padding: var(--card-padding); }
.organization-card-header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-5); }
.organization-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-primary); }
.organization-icon svg { inline-size: 20px; block-size: 20px; }
.organization-name { margin-block-end: var(--space-1); font-size: var(--text-lg); }
.organization-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--border-thin) solid var(--color-border); }

.membership-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.summary-separator { margin-inline: var(--space-2); color: var(--color-text-muted); }
.member-controls { min-inline-size: 210px; margin: 0; }
.member-controls[open] { padding-block: var(--space-2); }
.invitation-link-card .field-label { margin-block-start: var(--space-4); }
.leave-panel { border-color: var(--color-danger-border); }
.invitation-review { max-inline-size: 690px; }
.invitation-title { margin-block-start: var(--space-2); font-size: var(--text-2xl); }
.invitation-details { margin-block: var(--space-6); padding-block: var(--space-5); border-block: var(--border-thin) solid var(--color-border); }

.appearance-field { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.palette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-2); }
.palette-option { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--touch-min); padding: var(--space-2); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); cursor: pointer; }
.palette-option:hover { background: var(--color-surface-hover); }
.palette-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-surface-selected); font-weight: var(--weight-semibold); }
.palette-swatch { flex-shrink: 0; inline-size: 20px; block-size: 20px; border-radius: var(--radius-full); }
.palette-swatch-journey { background: var(--petrol-700); }
.palette-swatch-emerald { background: var(--emerald-700); }
.palette-swatch-indigo { background: var(--indigo-700); }
.palette-swatch-clay { background: var(--clay-700); }
.palette-swatch-graphite { background: var(--graphite-700); }

/* Guest screens */

.guest-shell { inline-size: min(100%, 1010px); margin-inline: auto; padding: var(--space-10) var(--page-gutter) var(--space-6); }
.guest-toolbar { display: flex; justify-content: flex-end; margin-block-end: var(--space-3); }
.guest-brand { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-block-end: var(--space-8); }
.guest-brand .brand-mark { color: var(--brand-mark-route); }
.guest-frame { display: grid; grid-template-columns: .87fr 1.13fr; overflow: hidden; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-3); }
.guest-intro { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-10) var(--space-8) var(--space-8); }
.intro-kicker { color: var(--color-text-muted); font-size: var(--text-sm); }
.guest-intro h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: var(--leading-heading); }
.guest-intro p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.intro-mark { color: var(--nav-text); margin-block: var(--space-4); }
.intro-mark .brand-logo, .intro-mark .brand-monogram { inline-size: 112px; block-size: 112px; font-size: var(--text-4xl); border-radius: var(--radius-xl); }
.settings-preview { display: block; inline-size: 64px; block-size: 64px; margin-block-end: var(--space-2); object-fit: contain; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); }
.intro-note { display: flex; align-items: center; gap: var(--space-2); margin-block-start: auto; color: var(--color-text-muted); font-size: var(--text-xs); }
.guest-content { min-inline-size: 0; padding: var(--space-10); }
.auth-heading { margin-block-end: var(--space-6); }
.auth-card { inline-size: 100%; }
.auth-card.card { border: 0; border-radius: 0; }
.auth-links { margin-block-start: var(--space-5); color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.auth-links a { font-weight: var(--weight-semibold); }
.guest-footer { margin-block-start: var(--space-6); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }

@media (max-width: 760px) {
    .guest-shell { max-inline-size: 550px; padding-block: var(--space-6) var(--space-5); }
    .guest-brand { margin-block-end: var(--space-5); }
    .guest-frame { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-lg); }
    .guest-intro { display: none; }
    .guest-content { padding: var(--space-6) var(--space-5); }
    .organization-card { padding: var(--card-padding); }
}