.personal-mode-switch {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.personal-mode-switch a {
  border: 1px solid currentColor;
  border-radius: .6rem;
  padding: .45rem .85rem;
  text-decoration: none;
}
.personal-mode-switch a[aria-current="page"] {
  font-weight: 700;
  background: var(--surface-subtle, #e8edf3);
}
.personal-recurrences { min-width: 0; display: grid; gap: var(--space-4, 1rem); }
.personal-recurrences .narrative-command-bar { min-width: 0; }
.personal-recurrences .narrative-controls { min-width: 0; }
.personal-recurrences .recurrence-anchor-form { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.personal-recurrences .recurrence-layout { align-items: start; }
.recurrence-board {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  max-width: 100%;
  padding: .25rem .25rem 1rem;
  scroll-snap-type: x proximity;
}
.recurrence-column { flex: 0 0 min(19rem, 85vw); min-width: 0; scroll-snap-align: start; }
.recurrence-column h3 { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.recurrence-cards { display: grid; gap: .75rem; }
.recurrence-card {
  display: grid;
  gap: .3rem;
  border: 1px solid var(--calendar-color, currentColor);
  border-left-width: .35rem;
  border-radius: .65rem;
  padding: .8rem;
  color: inherit;
  text-decoration: none;
  background: var(--surface, #fff);
  overflow-wrap: anywhere;
}
.recurrence-card strong { font-size: 1rem; }
.recurrence-card small { color: inherit; }
.recurrence-card:hover, .recurrence-card.is-selected { outline: 2px solid currentColor; outline-offset: 2px; }
.recurrence-card:focus-visible, .recurrence-board:focus-visible, .personal-mode-switch a:focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
.recurrence-empty { padding: 1.5rem; }
@media (min-width: 901px) {
  .personal-recurrences .recurrence-layout { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem); }
  .personal-recurrences .narrative-side {
    position: sticky;
    top: var(--space-3, .75rem);
    height: clamp(24rem, 60vh, 44rem);
    max-height: calc(100vh - 1.5rem);
  }
  .personal-recurrences .narrative-side-content { overflow-y: auto; }
}
@media (max-width: 900px) {
  .personal-recurrences .narrative-controls { display: grid; gap: 1rem; padding: 1rem; border: 1px solid currentColor; border-radius: .75rem; }
  .personal-recurrences .narrative-control-row { display: flex; gap: .75rem; flex-wrap: wrap; }
  .personal-recurrences .narrative-scope, .personal-recurrences .narrative-organize { display: flex; gap: .5rem; flex-wrap: wrap; }
  .personal-recurrences .recurrence-layout { display: grid; gap: 1rem; }
  .personal-recurrences .narrative-side { position: static; border: 1px solid currentColor; border-radius: .75rem; }
  .personal-recurrences .narrative-side-content { padding: 1rem; }
}
@media (forced-colors: active) {
  .recurrence-card { border-color: CanvasText; }
  .recurrence-card.is-selected { outline-color: Highlight; }
}

/* #1005 — le mode est un compartiment de surface, pas un filtre supplémentaire. */
@media (min-width: 901px) {
  .personal-mode-switch {
    width: fit-content;
    padding: .25rem;
    gap: .2rem;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-surface);
    background: color-mix(in srgb, var(--color-canvas) 34%, var(--color-surface));
  }

  .personal-mode-switch a {
    border-color: transparent;
    color: var(--color-muted);
  }

  .personal-mode-switch a[aria-current="page"] {
    border-color: var(--color-line);
    background: var(--color-surface);
    color: var(--color-brand-strong);
    box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
  }
}

/* #1015 — recurrence is a lens of the same stable planning controls. */
@media (max-width: 900px) {
  .personal-recurrences .narrative-filter-group--scope,
  .personal-recurrences .narrative-filter-grid {
    display: grid;
    gap: .75rem;
  }
  .personal-recurrences .narrative-filter-grid > .narrative-filter-group {
    display: grid;
    gap: .5rem;
    border-top: 1px solid currentColor;
    padding-top: .75rem;
  }
  .personal-recurrences .narrative-control-label {
    width: auto;
    font-weight: 700;
  }
  .personal-recurrences .narrative-reference-selector {
    position: relative;
  }
  .personal-recurrences .narrative-reference-trigger,
  .personal-recurrences .narrative-filter-toggle {
    width: fit-content;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid currentColor;
    border-radius: .55rem;
    padding: 0 .75rem;
    color: inherit;
    text-decoration: none;
  }
  .personal-recurrences .narrative-filter-toggle[aria-pressed="true"] {
    font-weight: 700;
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  .personal-recurrences .narrative-range-picker {
    position: static;
    width: 100%;
    margin-top: .5rem;
  }
}