/* Olowo shared component styles
 *
 * Consumes tokens from variables.css and the loaded theme only. Spacing and
 * radius read public_html/theme/spacing.css values with literal fallbacks so
 * the scale stays single-sourced without requiring that file on every page.
 *
 * Class convention: .ol-<component>[__element][--modifier]
 * Mobile-first. Tablet and desktop refinements live at the bottom of the file.
 */

/* ---------------------------------------------------------------- Focus */

.ol-btn:focus-visible,
.ol-tabbar__tab:focus-visible,
.ol-card__disclosure:focus-visible,
.ol-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ---------------------------------------------------------------- Button */

.ol-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  border: 1px solid transparent;
  border-radius: var(--radius-button, 9999px);
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              opacity var(--motion-fast) var(--motion-ease);
}

.ol-btn--small  { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);  font-size: 0.75rem; }
.ol-btn--medium { padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem); font-size: 0.8125rem; }
.ol-btn--large  { padding: var(--space-4, 1rem) var(--space-6, 1.5rem);     font-size: 0.9375rem; }

.ol-btn--block { display: flex; width: 100%; }

.ol-btn--primary {
  background: var(--color-action-primary);
  color: var(--color-action-on-primary);
}
.ol-btn--primary:hover:not(:disabled) { filter: brightness(1.08); }

.ol-btn--secondary {
  background: var(--color-action-secondary);
  color: var(--color-action-on-secondary);
  border-color: var(--color-border-subtle);
}
.ol-btn--secondary:hover:not(:disabled) { background: var(--color-surface-sunken); }

.ol-btn--danger {
  background: var(--tone-danger-bg);
  color: var(--tone-danger-fg);
}
.ol-btn--danger:hover:not(:disabled) { filter: brightness(0.96); }

.ol-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
}
.ol-btn--ghost:hover:not(:disabled) { background: var(--color-surface-sunken); }

.ol-btn--success {
  background: var(--color-status-success);
  color: var(--color-action-on-primary);
}
.ol-btn--success:hover:not(:disabled) { filter: brightness(1.06); }

/* Outlined counterpart to --success. Used for the Cancel half of the
   standard two-button footer (see .ol-actions). */
.ol-btn--success-outline {
  background: transparent;
  color: var(--color-status-success);
  border-color: var(--color-status-success);
}
.ol-btn--success-outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-status-success) 8%, transparent);
}

.ol-btn:disabled,
.ol-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.ol-btn__spinner {
  width: 0.875em;
  height: 0.875em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full, 9999px);
  animation: ol-spin 0.7s linear infinite;
}

@keyframes ol-spin { to { transform: rotate(360deg); } }

.ol-btn__icon { display: inline-flex; flex: none; }

/* ---------------------------------------------------------------- Badge */

.ol-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.ol-badge--neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.ol-badge--brand   { background: var(--tone-brand-bg);   color: var(--tone-brand-fg); }
.ol-badge--accent  { background: var(--tone-accent-bg);  color: var(--tone-accent-fg); }
.ol-badge--success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.ol-badge--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.ol-badge--danger  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.ol-badge--royal   { background: var(--tone-royal-bg);   color: var(--tone-royal-fg); }

/* Team roles. One tone per role rather than reusing the status tones, so a
   role's colour never implies success or danger. */
.ol-badge--role-owner      { background: var(--role-owner-bg);      color: var(--role-owner-fg); }
.ol-badge--role-manager    { background: var(--role-manager-bg);    color: var(--role-manager-fg); }
.ol-badge--role-bookkeeper { background: var(--role-bookkeeper-bg); color: var(--role-bookkeeper-fg); }
.ol-badge--role-accountant { background: var(--role-accountant-bg); color: var(--role-accountant-fg); }
.ol-badge--role-viewer     { background: var(--role-viewer-bg);     color: var(--role-viewer-fg); }

.ol-badge--outline {
  background: transparent;
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
}

/* Leading icon slot. Artwork badges (profile types) carry their own colour, so
   this only handles alignment and keeps the glyph from being squashed. */
.ol-badge > [aria-hidden="true"]:not(.ol-badge__dot) {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.ol-badge__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full, 9999px);
  background: currentColor;
  flex: none;
}

/* ---------------------------------------------------------------- Avatar */

.ol-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: var(--radius-full, 9999px);
  background: var(--tone-brand-bg);
  color: var(--tone-brand-fg);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}

.ol-avatar--sm { width: var(--size-avatar-sm, 2rem);   height: var(--size-avatar-sm, 2rem);   font-size: 0.75rem; }
.ol-avatar--md { width: var(--size-avatar-md, 2.5rem); height: var(--size-avatar-md, 2.5rem); font-size: 0.875rem; }
.ol-avatar--lg { width: var(--size-avatar-lg, 3rem);   height: var(--size-avatar-lg, 3rem);   font-size: 1rem; }

.ol-avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- Card */

.ol-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card, 1rem);
  box-shadow: var(--elevation-card);
}

.ol-card--section    { padding: var(--space-4, 1rem); }
.ol-card--summary    { padding: var(--space-4, 1rem); }
.ol-card--expandable { padding: var(--space-4, 1rem); }
.ol-card--empty      { padding: var(--space-8, 2rem) var(--space-5, 1.25rem); text-align: center; }

/* Block inside a drawer. White, 20px radius, 16px padding, separated by a hairline
   border rather than elevation — the drawer is already a raised surface, so
   stacking shadows inside it made every section look like it was floating. */
.ol-card--nested {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card-lg, 1.25rem);
  box-shadow: none;
  padding: var(--space-4, 1rem);
}

.ol-card--hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: var(--radius-container, 1.5rem);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  min-height: 9.5rem;
}

.ol-card__hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.ol-card__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 16, 12, 0.15) 0%, rgba(20, 16, 12, 0.72) 100%);
}

.ol-card__hero-body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3, 0.75rem);
  min-height: inherit;
  padding: var(--space-4, 1rem);
}

.ol-card__hero-title {
  margin: 0;
  font-size: clamp(1.0625rem, 3.6vw, 1.375rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-inverse);
  text-shadow: 0 1px 2px rgba(20, 16, 12, 0.45);
}

.ol-card__hero-subtitle {
  margin: calc(var(--space-3, 0.75rem) * -1) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-inverse);
  opacity: 0.78;
}

.ol-card__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-card__subtitle {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.ol-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
}

.ol-card__body { margin-top: var(--space-3, 0.75rem); }

/* Whole card acts as the trigger for a drawer. */
.ol-card--tappable {
  cursor: pointer;
  transition: transform var(--motion-default) var(--motion-ease),
              box-shadow var(--motion-default) var(--motion-ease);
}

.ol-card--tappable:hover { transform: translateY(-1px); }
.ol-card--tappable:active { transform: translateY(0); }

.ol-card--tappable:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ol-card__disclosure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: transform var(--motion-default) var(--motion-ease);
}

.ol-card__disclosure[aria-expanded="true"] { transform: rotate(180deg); }

/* ------------------------------------------------------------- Team card */

/* Member and pending-invite rows on /team share this shell so the two lists
   read as one. Sized to the design: 16px padding, 20px radius, a 40px avatar
   beside two 20px text lines, then 16px down to the chip row — 113px overall.
   Borderless; the shadow alone lifts it off the page. */

.ol-team-card {
  padding: var(--space-4, 1rem);
  border: none;
  border-radius: var(--radius-card-lg, 1.25rem);
}

.ol-team-card .ol-card__header {
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.ol-team-card .ol-media {
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

/* Avatar tracks the two text lines it sits beside. */
.ol-team-card .ol-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.875rem;
  margin-top: 0.0625rem;
}

.ol-team-card .ol-media__title {
  font-size: 1rem;
  line-height: 1.25;
}

.ol-team-card .ol-media__meta {
  margin-top: 0.125rem;
  gap: var(--space-2, 0.5rem);
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--color-text-tertiary);
}

/* Long access summaries ("Accountant & transactions · Assigned properties")
   wrap onto further lines instead of ellipsizing, so nothing spills past the
   card edge on narrow screens. The name/role row above keeps its truncate. */
.ol-team-card .ol-media__meta .ol-truncate {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  flex: 1 1 auto;
}

.ol-team-card__state {
  font-weight: 600;
  color: var(--color-status-success);
}

.ol-team-card__state--inactive { color: var(--color-text-tertiary); }
.ol-team-card__state--pending  { color: var(--color-status-warning); }

.ol-team-card__sep {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

.ol-team-card .ol-chips { margin-top: var(--space-4, 1rem); }

/* Scope chip: white pill, hairline border, the person glyph picked out in the
   brand accent so it reads before the label does. */
.ol-team-card .ol-chips .ol-badge--outline {
  gap: var(--space-2, 0.5rem);
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  background: var(--color-surface-card);
  border-color: var(--color-border-subtle);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 500;
}

.ol-team-card .ol-chips .ol-badge--outline > [aria-hidden="true"] {
  display: inline-flex;
  color: var(--color-status-warning);
}

/* ---------------------------------------------------------------- StatTile */

.ol-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.25rem, 1.2vw, 0.5rem);
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.ol-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: clamp(0.375rem, 1.4vw, 0.875rem) clamp(0.375rem, 1.6vw, 1rem);
  border-radius: var(--radius-xl, 0.75rem);
  background: rgba(255, 255, 255, 0.14);
  color: var(--color-text-inverse);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.ol-stat--action {
  background: var(--color-status-success);
  color: var(--color-action-on-primary);
}

.ol-stat__icon { display: none; }

.ol-stat__value { font-size: clamp(0.8125rem, 2.6vw, 1.25rem); font-weight: 700; line-height: 1.1; }

.ol-stat__label { font-size: clamp(0.5rem, 1.7vw, 0.75rem); font-weight: 600; line-height: 1.2; }

.ol-stat__hint { font-size: clamp(0.4375rem, 1.5vw, 0.6875rem); opacity: 0.7; line-height: 1.2; }

/* ---------------------------------------------------------------- SectionHeading */

.ol-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin: var(--space-6, 1.5rem) 0 var(--space-3, 0.75rem);
}

.ol-section-heading__text { min-width: 0; }

.ol-section-heading__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.ol-section-heading__subtitle {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.ol-section-heading__dots { display: inline-flex; gap: 0.1875rem; flex: none; }

.ol-section-heading__dots span {
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: var(--radius-full, 9999px);
}

.ol-section-heading__dots span:nth-child(1) { background: var(--color-action-primary); }
.ol-section-heading__dots span:nth-child(2) { background: var(--color-status-warning); }
.ol-section-heading__dots span:nth-child(3) { background: var(--color-status-success); }

/* ---------------------------------------------------------------- TabBar */

.ol-tabbar {
  display: flex;
  gap: var(--space-2, 0.5rem);
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: var(--space-1, 0.25rem);
}

.ol-tabbar::-webkit-scrollbar { display: none; }

.ol-tabbar__tab {
  flex: none;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border: 1px solid transparent;
  border-radius: var(--radius-full, 9999px);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}

.ol-tabbar__tab:hover { background: var(--color-surface-sunken); }

.ol-tabbar__tab[aria-selected="true"] {
  background: var(--color-action-selected);
  color: var(--color-action-on-selected);
  border-color: var(--color-action-selected);
}

.ol-tabbar__tab[aria-selected="true"]:hover {
  background: var(--color-action-selected);
}

.ol-tabbar__count {
  margin-left: var(--space-1, 0.25rem);
  opacity: 0.65;
  font-weight: 500;
}

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

/* The strip above the profile carousel: avatar and greeting, date and current
   weather, notification bell. Rendered by App/Views/partials/profile-header.php
   on every page that scopes by profile — so, like the carousel below, it lives
   here rather than in dashboard-mock.css, which only loads on dashboard routes.

   The neumorphic custom properties are only defined on the dashboard body, so
   every use below carries a fallback. */

/* Three equal-weight columns so the date/weather block sits on the true centre
   of the header rather than the centre of whatever space the avatar and bell
   leave over. */
.dash-header {
  /* Greeting and date/weather are both two-line stacks sharing one rhythm, so
     "Hi" sits on the date's line and the name on the weather's line. Change the
     row heights here and both columns stay in step. */
  --dash-header-row-1: 1.15rem;
  --dash-header-row-2: 1.35rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0 0.15rem;
}

.dash-header-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  min-width: 0;
}

/* Two rows, "Hi" over the name, on the same rhythm as the date/weather block
   beside it. Each span sets line-height to its row height, which centres the
   single line of text in the row without needing extra wrappers. */
.dash-header-greeting {
  display: grid;
  grid-template-rows: var(--dash-header-row-1) var(--dash-header-row-2);
  justify-items: start;
  margin: 0;
  min-width: 0;
  font-size: 0.82rem;
  color: #8a7a5c;
}

.dash-header-greeting-hi {
  display: block;
  max-width: 100%;
  line-height: var(--dash-header-row-1);
  white-space: nowrap;
}

.dash-header-greeting-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--dash-header-row-2);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, #4a4744);
}

.dash-header-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.dash-header-avatar-btn {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.dash-header-avatar,
.dash-header-avatar-img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.dash-header-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-dark);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-header-settings {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dash-header-meta {
  justify-self: center;
  display: grid;
  grid-template-rows: var(--dash-header-row-1) var(--dash-header-row-2);
  justify-items: center;
  text-align: center;
  font-size: 0.82rem;
  color: #8a7a5c;
}

.dash-header-date {
  line-height: var(--dash-header-row-1);
  white-space: nowrap;
}

.dash-header-meta strong {
  font-weight: 500;
  color: #6f5f42;
}

.dash-header-weather {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  height: var(--dash-header-row-2);
  line-height: var(--dash-header-row-2);
  font-size: 0.8rem;
  color: #8a7a5c;
  white-space: nowrap;
}

.dash-header-weather-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dash-header-weather-place {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}

.dash-header-weather-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 13ch;
}

/* Fallback day/night icon shown while there is no live forecast yet. */
.dash-header-weather--placeholder {
  opacity: 0.6;
}

.dash-header-bell {
  position: relative;
  justify-self: end;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding: 0;
  color: var(--gold-dark);
  text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #f8f4eb, #e8e0d2);
  box-shadow:
    4px 4px 10px var(--dash-neu-shadow-dark, rgba(134, 122, 102, 0.28)),
    -3px -3px 8px var(--dash-neu-shadow-light, rgba(255, 255, 255, 0.85));
}

.dash-header-bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.dash-header-bell-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  /* Bell glyphs sit low in the viewBox — nudge up for optical center */
  transform: translateY(-1px);
}

.dash-header-bell-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dash-neu-surface, #f3efe6);
}

@media (max-width: 380px) {
  .dash-header-weather-place {
    max-width: 9ch;
  }
}

@media (max-width: 520px) {
  .dash-header-weather-label {
    display: none;
  }
}

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

/* Horizontal scope picker: an icon tile per tax profile. Used by the dashboard
   (as links that reload) and the team page (as buttons driving Alpine state),
   so the rules live here rather than in dashboard-mock.css, which only loads
   on dashboard routes. */

.profile-carousel-card {
  padding: 1rem 0.85rem 0.75rem;
}

/* Four tiles fill the track width exactly; the rest scroll in. Spacing lives in
   the tile's own padding rather than a flex gap, so the 25% basis stays honest
   however many tiles there are. */
.profile-carousel-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 0.15rem 0 0.35rem;
}

.profile-carousel-track::-webkit-scrollbar {
  display: none;
}

.profile-carousel-item {
  flex: 0 0 25%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  padding-inline: 0.3rem;
  box-sizing: border-box;
}

.profile-carousel-icon {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0.72;
  transition: opacity 0.2s, transform 0.2s;
}

/* Two artworks per tile: outline at rest, filled when selected. Both are in
   the DOM and cross-fade, so switching profiles never flashes a blank icon. */
.profile-carousel-icon-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.profile-carousel-icon-img.is-active {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.profile-carousel-item.active .profile-carousel-icon-img.is-rest { opacity: 0; }
.profile-carousel-item.active .profile-carousel-icon-img.is-active { opacity: 1; }

.profile-carousel-item.active .profile-carousel-icon {
  opacity: 1;
  transform: scale(1.04);
}

.profile-carousel-label {
  font-size: 0.66rem;
  color: var(--ink-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.profile-carousel-item.active .profile-carousel-label {
  color: var(--ink);
  font-weight: 600;
}

/* Action tile ("Add profile"): never selected, so the filled artwork is the
   hover/focus state instead of the active state. */
.profile-carousel-item--action .profile-carousel-icon { opacity: 0.6; }

.profile-carousel-item--action:hover .profile-carousel-icon,
.profile-carousel-item--action:focus-visible .profile-carousel-icon {
  opacity: 1;
  transform: scale(1.04);
}

.profile-carousel-item--action:hover .profile-carousel-icon-img.is-rest,
.profile-carousel-item--action:focus-visible .profile-carousel-icon-img.is-rest { opacity: 0; }

.profile-carousel-item--action:hover .profile-carousel-icon-img.is-active,
.profile-carousel-item--action:focus-visible .profile-carousel-icon-img.is-active { opacity: 1; }

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.carousel-dot {
  position: relative;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d4cdc0;
  cursor: pointer;
  transition: width var(--motion-default) var(--motion-ease),
              background var(--motion-default) var(--motion-ease);
}

/* Comfortable tap target without changing the painted dot. */
.carousel-dot::after {
  content: "";
  position: absolute;
  inset: -0.5rem -0.25rem;
}

.carousel-dot:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.carousel-dot.active {
  background: #e67e22;
  width: 14px;
  border-radius: 999px;
}

/* Button variant: the team page drives Alpine state instead of navigating, so
   the items are buttons and need a reset the anchor version never required. */
.ol-profile-carousel {
  margin: 0 0 var(--space-2, 0.5rem);
  padding-left: 0;
  padding-right: 0;
}

.ol-profile-carousel .profile-carousel-item {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0 0.3rem;
  font: inherit;
  cursor: pointer;
}

.ol-profile-carousel .profile-carousel-item:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);
  outline-offset: var(--focus-ring-offset, 2px);
  border-radius: var(--radius-lg, 0.5rem);
}

/* ---------------------------------------------------------------- EmptyState */

.ol-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar-lg, 3rem);
  height: var(--size-avatar-lg, 3rem);
  margin: 0 auto;
  border-radius: var(--radius-full, 9999px);
  background: var(--tone-brand-bg);
  color: var(--tone-brand-fg);
}

.ol-empty__title {
  margin: var(--space-4, 1rem) 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-empty__description {
  margin: var(--space-1, 0.25rem) auto 0;
  max-width: 26rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.ol-empty__actions { margin-top: var(--space-5, 1.25rem); }

/* ---------------------------------------------------------------- Shared primitives */

.ol-stack        { display: grid; gap: var(--space-3, 0.75rem); }
.ol-stack--tight { gap: var(--space-2, 0.5rem); }

.ol-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  min-width: 0;
}

.ol-truncate {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ol-meta-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.ol-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-action-primary);
  text-decoration: none;
  cursor: pointer;
}

.ol-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- Input */

.ol-input { display: grid; gap: var(--space-2, 0.5rem); }

.ol-input__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.ol-input__required { margin-left: 0.125rem; color: var(--color-status-danger); }

.ol-input__field {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0 var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
  transition: border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease);
}

.ol-input__field:focus-within { border-color: var(--focus-ring-color); }

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .ol-input__field:focus-within {
    box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent);
  }
}

.ol-input__field--invalid { border-color: var(--color-status-danger); }

/* Doubled-up selector on purpose. Legacy sheets style bare `input[type=...]`,
   which outranks a single class — this keeps the control transparent so the
   .ol-input__field wrapper owns the border, radius and background. */
.ol-input__field .ol-input__control,
.ol-input__control {
  flex: 1;
  min-width: 0;
  padding: var(--space-3, 0.75rem) 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 400;
}

.ol-input__control:focus { outline: none; }

.ol-input__control::placeholder { color: var(--color-text-tertiary); }

.ol-input__control:read-only { color: var(--color-text-secondary); }

/* Autofill. The UA paints its own background on the <input> only, which leaves
   a hard-edged block sitting inside the field's padding. Repaint it with the
   field colour and park the transition so Chrome never animates back to it. */
.ol-input__control:-webkit-autofill,
.ol-input__control:-webkit-autofill:hover,
.ol-input__control:-webkit-autofill:focus,
.ol-input__control:autofill {
  -webkit-text-fill-color: var(--color-text-primary);
  box-shadow: 0 0 0 100vmax var(--color-surface-card) inset;
  caret-color: var(--color-text-primary);
  transition: background-color 0s 600000s, color 0s 600000s;
}

.ol-input--disabled .ol-input__control:-webkit-autofill {
  box-shadow: 0 0 0 100vmax var(--color-surface-sunken) inset;
}

.ol-input--disabled { opacity: 0.6; }

.ol-input--disabled .ol-input__field { background: var(--color-surface-sunken); }

.ol-input__affix {
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
}

.ol-input__reveal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: calc(var(--space-2, 0.5rem) * -1);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full, 9999px);
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}

.ol-input__reveal:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
}

.ol-input__reveal:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ol-input__help,
.ol-input__error { margin: 0; font-size: 0.6875rem; }

.ol-input__help { color: var(--color-text-tertiary); }

.ol-input__error { color: var(--color-status-danger); font-weight: 600; }

/* Select needs its own affordance since the native arrow is hidden by the
   transparent control background in some engines. */
.ol-input__field select.ol-input__control {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 0.5rem center, right 0.25rem center;
  background-size: 0.25rem 0.25rem, 0.25rem 0.25rem;
  background-repeat: no-repeat;
  padding-right: var(--space-4, 1rem);
}

/* ---------------------------------------------------------------- MediaRow */

/* Avatar or icon, a text block, and an optional trailing slot. Used by any
   list of people, accounts or records. */
.ol-media {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

.ol-media__body { min-width: 0; flex: 1; }

.ol-media__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-media__meta {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.ol-media__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex: none;
}

/* ---------------------------------------------------------------- Chips */

.ol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-2, 0.5rem);
}

.ol-chips--flush { margin-top: 0; }

/* -------------------------------------------------------- Editable section */

/* View/edit pair inside the team access drawer: a heading with a chevron, a
   read-only summary, and the form that opens *beneath* it — the summary stays
   put so what is currently set reads above the controls that change it. */

.ol-edit-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.ol-edit-section__head .ol-meta-label { margin: 0; }

.ol-edit-section__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: transform var(--motion-default) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              background var(--motion-fast) var(--motion-ease);
}

/* Open is the "on" state: the circle fills with the house active brown and the
   chevron flips to the on-active foreground. */
.ol-edit-section__toggle.is-open {
  transform: rotate(180deg);
  color: var(--color-action-on-active);
  background: var(--color-action-active);
}

.ol-edit-section__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Summary chips read as labels, not status pills — same weight and fill as the
   ones on the team card so a profile looks identical in both places. */
.ol-edit-section__summary .ol-badge--outline {
  gap: var(--space-2, 0.5rem);
  background: var(--color-surface-card);
  color: var(--color-text-primary);
  font-size: 0.75rem;
  font-weight: 500;
}

.ol-edit-section__form {
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--color-border-subtle);
}

.ol-edit-section__form-label {
  margin: 0 0 var(--space-3, 0.75rem);
}

/* Global convention: a panel or form footer is a two-button row —
   outlined "Cancel" on the left, filled "Save changes" on the right, equal
   width. Use .ol-actions with Button variants success-outline + success. */
.ol-actions,
.ol-edit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-1, 0.25rem);
}

.ol-actions .ol-btn,
.ol-edit-actions .ol-btn { width: 100%; }

.ol-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

/* -------------------------------------------------------------- Avatar picker */

.ol-avatar-picker {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
}

.ol-avatar-picker__body {
  display: grid;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.ol-avatar-picker__hint {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

.ol-avatar-picker__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.ol-avatar-picker__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-avatar-sm, 2rem);
  height: var(--size-avatar-sm, 2rem);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-full, 9999px);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease),
              transform var(--motion-fast) var(--motion-ease);
}

.ol-avatar-picker__option:hover { transform: scale(1.06); }

.ol-avatar-picker__option.is-active { border-color: var(--color-action-selected, #4e3927); }

.ol-avatar-picker__option:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ol-avatar-picker__option--brand   { background: var(--tone-brand-bg);   color: var(--tone-brand-fg); }
.ol-avatar-picker__option--accent  { background: var(--tone-accent-bg);  color: var(--tone-accent-fg); }
.ol-avatar-picker__option--success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.ol-avatar-picker__option--warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.ol-avatar-picker__option--royal   { background: var(--tone-royal-bg);   color: var(--tone-royal-fg); }
.ol-avatar-picker__option--neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

.ol-link--action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 0.25rem);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-action-primary);
}

.ol-link--danger {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-action-danger);
}

/* Upload and Remove share one .ol-inline row but each needs its own <form>. */
.ol-avatar-picker__form {
  display: inline-flex;
  margin: 0;
}

/* The upload trigger is a <label> driving a visually hidden file input. */
label.ol-link--action {
  cursor: pointer;
}

.ol-avatar-picker__form input[type="file"]:focus-visible + label.ol-link--action {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ------------------------------------------------------------ Assignment row */

/* Named resource with its access level: dot, name, role badge. */
.ol-assign-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-sunken);
}

.ol-assign-row__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full, 9999px);
  background: var(--color-status-warning);
}

.ol-assign-row__name {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* ------------------------------------------------------------- Policy row */

.ol-policy-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  cursor: pointer;
  transition: border-color var(--motion-fast) var(--motion-ease);
}

.ol-policy-row.is-on { border-color: var(--color-status-success); }

.ol-policy-row__box {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.0625rem;
  accent-color: var(--color-status-success);
}

.ol-policy-row__body { display: grid; gap: 0.125rem; min-width: 0; }

.ol-policy-row__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-policy-row__meta {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------- Checklist */

.ol-checklist { display: grid; gap: var(--space-3, 0.75rem); margin: 0; padding: 0; list-style: none; }

.ol-checklist__item { display: flex; gap: var(--space-2, 0.5rem); align-items: flex-start; }

.ol-checklist__mark { flex: none; margin-top: 0.0625rem; color: var(--color-status-success); }

.ol-checklist__item--denied .ol-checklist__mark { color: var(--color-text-tertiary); }

.ol-checklist__item--denied .ol-checklist__title { color: var(--color-text-tertiary); }

.ol-checklist__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-checklist__description {
  margin: 0.0625rem 0 0;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

/* ---------------------------------------------------------------- DetailRow */

.ol-detail { display: flex; align-items: center; gap: var(--space-2, 0.5rem); min-width: 0; }

.ol-detail__icon { flex: none; color: var(--color-text-tertiary); display: inline-flex; }

.ol-detail__value { font-size: 0.8125rem; color: var(--color-text-primary); }

.ol-detail__value--muted { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- Page layout */

.ol-page {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding-inline: var(--space-3, 0.75rem);
  padding-bottom: var(--space-24, 6rem);
}

.ol-page__list { display: grid; gap: var(--space-3, 0.75rem); }

.ol-page__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* ---------------------------------------------------------------- Drawer */

.ol-drawer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ol-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 22, 16, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* The panel itself never scrolls: the grabber and header stay put at the top of
   the sheet while .ol-drawer__body takes the overflow. */
.ol-drawer__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 40rem;
  max-height: 88vh;
  max-height: 88dvh;
  overflow: hidden;
  padding: 0 var(--space-4, 1rem) max(var(--space-4, 1rem), env(safe-area-inset-bottom));
  border-radius: var(--radius-2xl, 1.25rem) var(--radius-2xl, 1.25rem) 0 0;
  background: var(--color-surface-card, #ffffff);
  box-shadow: 0 -0.75rem 2.5rem rgba(28, 22, 16, 0.28);
}

.ol-drawer__handle {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  padding: var(--space-2, 0.5rem) 0 var(--space-1, 0.25rem);
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.ol-drawer__handle::before {
  content: "";
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 999px;
  background: var(--color-border, rgba(28, 22, 16, 0.15));
}

.ol-drawer__header {
  flex: none;
  padding-bottom: var(--space-3, 0.75rem);
  text-align: center;
}

/* Centred title with an action pinned right. The heading keeps the full width
   so the title stays optically centred regardless of the action's size. */
.ol-drawer__header--has-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ol-drawer__header--has-actions .ol-drawer__heading { flex: 1; min-width: 0; }

.ol-drawer__actions {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.ol-drawer__footer {
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-2, 0.5rem);
  padding-top: var(--space-4, 1rem);
}

.ol-drawer__footer .ol-btn { width: 100%; }

.ol-drawer__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.ol-drawer__subtitle {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* The centred title plus an absolutely positioned action only coexist while
   there is room for both. Below that the header becomes a plain left/right
   row, otherwise "Revoke access" sits on top of "Team access profile". */
@media (max-width: 30rem) {
  .ol-drawer__header--has-actions {
    justify-content: space-between;
    gap: var(--space-3, 0.75rem);
    text-align: left;
  }

  .ol-drawer__header--has-actions .ol-drawer__heading {
    flex: 1 1 auto;
    text-align: left;
  }

  .ol-drawer__header--has-actions .ol-drawer__actions {
    position: static;
    flex: none;
  }
}

.ol-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2, 0.5rem);
}

.ol-drawer__slide { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.ol-drawer__panel--closed { transform: translateY(100%); }
.ol-drawer__panel--opened { transform: translateY(0); }

.ol-drawer__fade { transition: opacity 0.3s ease; }
.ol-drawer__scrim--hidden { opacity: 0; }
.ol-drawer__scrim--shown { opacity: 1; }

.ol-scroll-lock { overflow: hidden; }

/* ---------------------------------------------------------------- Invite form */

.ol-invite {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.ol-invite__actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) 0 var(--space-1, 0.25rem);
  background: var(--color-surface-page, #fdfbf7);
}

/* Numbered, collapsible step. */
.ol-form-section {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-3, 0.75rem);
}

.ol-form-section:first-of-type { border-top: 0; padding-top: 0; }

.ol-form-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  padding: var(--space-1, 0.25rem) 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}

.ol-form-section__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-action-primary);
}

.ol-form-section__icon { display: inline-flex; opacity: 0.9; }

.ol-form-section__chevron {
  display: inline-flex;
  color: var(--color-text-tertiary);
  transition: transform var(--motion-default) var(--motion-ease);
}

.ol-form-section__chevron.is-open { transform: rotate(180deg); }

.ol-form-section__hint {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.ol-form-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding-top: var(--space-3, 0.75rem);
}

.ol-form-section__note {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-text-tertiary);
  text-align: center;
}

.ol-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--space-2, 0.5rem);
}

/* Selectable row with an icon, copy and a checkbox. */
.ol-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
  cursor: pointer;
}

.ol-choice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-lg, 0.625rem);
  background: var(--tone-brand-bg);
  color: var(--tone-brand-fg);
}

/* Brand artwork rather than a stroked glyph — the PNGs carry their own colour,
   so the tile drops the tint and sits on a plain surface like the carousel. */
.ol-choice__icon--art {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border-subtle, rgba(0, 0, 0, 0.06));
}

.ol-choice__icon--art img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ol-choice__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1 1 auto; }
.ol-choice__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); }
.ol-choice__meta { font-size: 0.6875rem; color: var(--color-text-tertiary); }

/* Global convention: tick boxes sit on the LEFT of their row, before the
   icon and copy. Applies to every .ol-checkbox in a flex row (.ol-choice and
   any future row component). Toggle switches (.ol-switch) stay on the right. */
.ol-checkbox {
  order: -1;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 0.375rem;
  background: var(--color-surface-card);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}

.ol-checkbox:checked {
  border-color: var(--color-action-primary);
  background: var(--color-action-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.75rem;
  background-position: center;
  background-repeat: no-repeat;
}

.ol-checkbox:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Resource row with a None / Viewer / Manager choice. */
.ol-assign {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
}

.ol-assign__title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ol-assign__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--color-border-subtle);
  transition: background var(--motion-fast) var(--motion-ease);
}

.ol-assign__dot.is-on { background: var(--color-status-success); }

/* Options share the row evenly and wrap together when they stop fitting. A
   fixed 3-column grid stranded the 4th option on the accounts control (None /
   Viewer / Editor / Manager) as a lone full-width row. */
.ol-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

.ol-segmented__option {
  flex: 1 1 4rem;
  min-width: 0;
  padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg, 0.625rem);
  background: var(--color-surface-card);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}

.ol-segmented__option.is-active {
  background: var(--color-action-active-soft);
  border-color: var(--color-action-active);
  color: var(--color-action-active);
  font-weight: 600;
}

/* Role picker: a select that can show a description per option. */
.ol-listbox { position: relative; display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); }

.ol-listbox__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
  font-size: 0.875rem;
  color: var(--color-text-primary);
  cursor: pointer;
}

.ol-listbox__trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.ol-listbox__chevron {
  display: inline-flex;
  color: var(--color-text-tertiary);
  transition: transform var(--motion-default) var(--motion-ease);
}

.ol-listbox__chevron.is-open { transform: rotate(180deg); }

.ol-listbox__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 15rem;
  overflow-y: auto;
  padding: var(--space-1, 0.25rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
  box-shadow: var(--elevation-raised);
}

.ol-listbox__option {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 0;
  border-radius: var(--radius-lg, 0.625rem);
  background: none;
  text-align: left;
  cursor: pointer;
}

.ol-listbox__option:hover,
.ol-listbox__option.is-selected { background: var(--color-surface-sunken); }

.ol-listbox__body { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.ol-listbox__title { font-size: 0.8125rem; font-weight: 700; color: var(--color-text-primary); }
.ol-listbox__meta { font-size: 0.6875rem; color: var(--color-text-tertiary); }
.ol-listbox__check { display: inline-flex; color: var(--color-status-success); }

.ol-policy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-sunken);
}

.ol-policy__value {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-action-primary);
}

/* Permission row with a switch. */
.ol-toggle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl, 0.75rem);
  background: var(--color-surface-card);
  cursor: pointer;
}

.ol-toggle-row.is-off { opacity: 0.55; }

.ol-toggle-row__body { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.ol-toggle-row__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); }
.ol-toggle-row__meta { font-size: 0.6875rem; color: var(--color-text-tertiary); }

.ol-switch {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.375rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-surface-muted);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: background var(--motion-fast) var(--motion-ease);
}

.ol-switch::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 22, 16, 0.3);
  transition: transform var(--motion-default) var(--motion-ease);
}

.ol-switch:checked { background: var(--color-status-success); }
.ol-switch:checked::after { transform: translateX(1.125rem); }

.ol-switch:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* ---------------------------------------------------------------- Responsive */

@media (min-width: 768px) {
  .ol-page { max-width: 40rem; padding-inline: var(--space-4, 1rem); }
  .ol-card--hero { min-height: 11rem; }
  .ol-card__hero-body { padding: var(--space-5, 1.25rem); }
  .ol-section-heading__title { font-size: 1.25rem; }
  .profile-carousel-icon { width: 52px; height: 52px; }
  .profile-carousel-icon-img { width: 46px; height: 46px; }
  .profile-carousel-label { font-size: 0.72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ol-btn,
  .ol-card--tappable,
  .ol-card__disclosure,
  .ol-form-section__chevron,
  .ol-listbox__chevron,
  .ol-switch::after,
  .ol-drawer__slide,
  .ol-drawer__fade,
  .ol-tabbar__tab { transition: none; }
  .ol-btn__spinner { animation: none; }
}