@import url("../design/tokens.cf68e2506a35.css");

.narrative-mobile {
  display: none;
}

@media (max-width: 900px) {
  .personal-schedule--narrative .schedule-compact-bar,
  .personal-schedule--narrative .schedule-controls,
  .personal-schedule--narrative .schedule-main--legacy,
  .personal-schedule--narrative.schedule-enhanced .schedule-compact-bar,
  .personal-schedule--narrative.schedule-enhanced .schedule-controls,
  .personal-schedule--narrative.schedule-enhanced .schedule-main--legacy {
    display: none;
  }

  .narrative-mobile {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
  }

  .narrative-mobile-background,
  .narrative-mobile-primary {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
  }

  .narrative-mobile-controls,
  .narrative-mobile-summary,
  .narrative-mobile-panel {
    min-width: 0;
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-surface);
    background: var(--color-surface);
  }

  .narrative-mobile-controls {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
  }

  .narrative-mobile-control-group {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-label {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-mobile-scope-selector {
    min-width: 0;
  }

  .narrative-mobile-scope-selector > summary {
    min-width: 0;
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    list-style: none;
  }

  .narrative-mobile-scope-selector > summary::-webkit-details-marker {
    display: none;
  }

  .narrative-mobile-scope-selector > summary span,
  .narrative-mobile-scope-selector > summary strong,
  .narrative-mobile-single-scope {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-scope-selector > summary strong {
    color: var(--color-brand-strong);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-scope-selector > nav {
    max-height: min(50vh, 24rem);
    display: grid;
    gap: var(--space-1);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: var(--space-2);
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    padding: var(--space-2);
  }

  .narrative-mobile-scope-selector > nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    font-weight: var(--typography-weight-medium);
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  .narrative-mobile-scope-selector > nav a[aria-current="page"] {
    background: var(--color-canvas);
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-mobile-horizons {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    border-radius: var(--radius-control);
    padding: 2px;
    background: var(--color-canvas);
  }

  .narrative-mobile-horizons a {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-default) solid transparent;
    border-radius: calc(var(--radius-control) - 2px);
    padding: var(--space-1) 3px;
    color: var(--color-ink);
    font-size: var(--typography-size-caption);
    font-weight: var(--typography-weight-semibold);
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-horizons a[aria-current="page"] {
    border-color: var(--color-line);
    background: var(--color-surface);
    color: var(--color-brand-strong);
  }

  .narrative-mobile-date-nav {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-2);
  }

  .narrative-mobile-date-nav > strong {
    min-width: 0;
    font-size: var(--typography-size-meta);
    text-align: center;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-arrow,
  .narrative-mobile-today {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    color: var(--color-ink);
    background: var(--color-surface);
    font-weight: var(--typography-weight-semibold);
    text-decoration: none;
  }

  .narrative-mobile-arrow {
    width: 44px;
    padding: 0;
    font-size: 1.35rem;
  }

  .narrative-mobile-today {
    justify-self: start;
    padding-inline: var(--space-3);
  }

  .narrative-mobile-custom {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    border-top: var(--border-width-default) solid var(--color-line);
    padding-top: var(--space-3);
  }

  .narrative-mobile-custom label {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-mobile-custom input,
  .narrative-mobile-custom button {
    min-width: 0;
    min-height: 44px;
  }

  .narrative-mobile-custom button,
  .narrative-mobile-custom small {
    grid-column: 1 / -1;
  }

  .narrative-mobile-custom small {
    color: var(--color-muted);
  }

  .narrative-mobile-summary {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
  }

  .narrative-mobile-summary > strong,
  .narrative-mobile-summary > span,
  .narrative-mobile-next > * {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-summary > span,
  .narrative-mobile-next span,
  .narrative-mobile-next small {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-next {
    min-width: 0;
    display: grid;
    gap: 1px;
    margin-top: var(--space-2);
  }

  .narrative-mobile-summary--partial {
    gap: var(--space-2);
  }

  .narrative-mobile-summary--partial a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;
    border-radius: var(--radius-control);
    padding-inline: var(--space-3);
    background: var(--color-brand-strong);
    color: var(--color-surface);
    font-weight: var(--typography-weight-semibold);
    text-decoration: none;
  }

  .narrative-mobile-panel {
    padding: var(--space-3);
  }

  .narrative-mobile-panel-head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .narrative-mobile-panel-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
  }

  .narrative-mobile-panel-head h3 {
    margin: 0;
    font-size: var(--typography-size-heading-sm);
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-panel-head span,
  .narrative-mobile-panel-head > strong {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
    overflow-wrap: anywhere;
  }

  .narrative-mobile-allday {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--color-canvas);
  }

  .narrative-mobile-allday > strong {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-allday-card {
    min-width: 0;
    min-height: 44px;
    display: grid;
    align-content: center;
    gap: 2px;
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-left: 4px solid var(--calendar-color, var(--color-brand));
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    background: color-mix(
      in srgb,
      var(--calendar-color, var(--color-brand)) 10%,
      var(--color-surface)
    );
    color: var(--color-ink);
    text-decoration: none;
  }

  .narrative-mobile-events,
  .narrative-mobile-gaps,
  .narrative-mobile-sheet-entries {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .narrative-mobile-events {
    display: grid;
  }

  .narrative-mobile-events > li {
    min-width: 0;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-2);
    border-top: var(--border-width-default) solid var(--color-line);
  }

  .narrative-mobile-events > li:first-child {
    border-top: 0;
  }

  .narrative-mobile-time {
    display: grid;
    align-content: start;
    gap: 1px;
    font-variant-numeric: tabular-nums;
  }

  .narrative-mobile-time time {
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-mobile-time small {
    color: var(--color-muted);
  }

  .narrative-mobile-event-card {
    min-width: 0;
    min-height: 44px;
    display: grid;
    align-content: center;
    gap: 2px;
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-color: color-mix(
      in srgb,
      var(--calendar-color, var(--color-brand)) 24%,
      var(--color-line)
    );
    border-left: 4px solid var(--calendar-color, var(--color-brand));
    border-radius: var(--radius-control);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    background: color-mix(
      in srgb,
      var(--calendar-color, var(--color-brand)) 10%,
      var(--color-surface)
    );
    color: var(--color-ink);
    text-decoration: none;
  }

  .narrative-mobile-event-card strong,
  .narrative-mobile-allday-card strong,
  .narrative-mobile-event-provenance,
  .narrative-mobile-workspace-name,
  .narrative-mobile-calendar-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-event-provenance {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-1);
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .personal-involvement-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: 999px;
    padding: 0 var(--space-1);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
    font-size: var(--typography-size-caption);
    font-weight: var(--typography-weight-semibold);
    line-height: 1;
  }

  .narrative-mobile-calendar-name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .narrative-mobile-calendar-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: var(--calendar-color, var(--color-brand));
  }

  .narrative-mobile-event-card.is-selected,
  .narrative-mobile-allday-card.is-selected {
    box-shadow:
      inset 0 0 0 2px var(--color-brand),
      var(--shadow-surface);
  }

  .narrative-mobile-gaps {
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-gaps li {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    border-bottom: var(--border-width-default) solid var(--color-line);
    padding-bottom: var(--space-2);
  }

  .narrative-mobile-gaps span,
  .narrative-mobile-note,
  .narrative-mobile-empty {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-note,
  .narrative-mobile-empty {
    margin: var(--space-3) 0 0;
  }

  .narrative-mobile-day-list,
  .narrative-mobile-segments,
  .narrative-mobile-repartition-list {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-day-row,
  .narrative-mobile-segment {
    min-width: 0;
    min-height: 44px;
    display: grid;
    gap: 3px;
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    padding: var(--space-3);
    color: var(--color-ink);
    text-decoration: none;
  }

  .narrative-mobile-day-row.is-anchor,
  .narrative-mobile-segment.is-anchor {
    border-color: var(--color-brand-strong);
  }

  .narrative-mobile-day-top,
  .narrative-mobile-segment > div,
  .narrative-mobile-week-group > header {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .narrative-mobile-day-row > span,
  .narrative-mobile-day-row small,
  .narrative-mobile-day-row em,
  .narrative-mobile-segment small {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
    font-style: normal;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-week-group + .narrative-mobile-week-group {
    margin-top: var(--space-4);
  }

  .narrative-mobile-week-group > header {
    margin-bottom: var(--space-2);
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-segment > div > strong,
  .narrative-mobile-segment > div > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-bar {
    min-width: 0;
    height: 5px;
    display: block;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-line);
  }

  .narrative-mobile-bar i {
    width: 100%;
    height: 100%;
    display: block;
    transform: scaleX(var(--narrative-mobile-scale, 0));
    transform-origin: left center;
    background: var(--color-muted);
  }

  .narrative-mobile-repartition-row {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-repartition-row > div {
    min-width: 0;
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .narrative-mobile-repartition-row strong,
  .narrative-mobile-repartition-row span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-repartition-row > div > span {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
    text-align: right;
  }

  .narrative-mobile-sheet-backdrop[hidden],
  .narrative-mobile-sheet[hidden] {
    display: none;
  }

  .narrative-mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgb(0 0 0 / 35%);
  }

  .narrative-mobile-sheet {
    width: min(100%, 34rem);
    max-height: min(82vh, 44rem);
    position: fixed;
    z-index: 91;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    gap: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    margin-inline: auto;
    border: var(--border-width-default) solid var(--color-line);
    border-bottom: 0;
    border-radius: var(--radius-surface) var(--radius-surface) 0 0;
    padding: var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--color-surface);
    box-shadow: 0 -12px 36px rgb(0 0 0 / 16%);
  }

  .narrative-mobile-sheet--event {
    background: var(--color-surface);
    background: color-mix(
      in srgb,
      var(--calendar-color, var(--color-brand)) 9%,
      var(--color-surface)
    );
  }

  .narrative-mobile-sheet-handle {
    width: 3rem;
    height: 4px;
    justify-self: center;
    border-radius: 999px;
    background: var(--color-line);
  }

  .narrative-mobile-sheet-head {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .narrative-mobile-sheet-head > div {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
  }

  .narrative-mobile-sheet-head h3 {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-sheet-close {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
  }

  .narrative-mobile-sheet-facts {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-sheet-entries {
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-sheet-entries li {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 2px var(--space-2);
    border-top: var(--border-width-default) solid var(--color-line);
    padding-top: var(--space-2);
  }

  .narrative-mobile-sheet-entries time,
  .narrative-mobile-sheet-entries > li > span {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-mobile-sheet-entries strong,
  .narrative-mobile-sheet-entries small {
    min-width: 0;
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
  }

  .narrative-mobile-sheet-entries small {
    color: var(--color-muted);
  }

  .narrative-mobile-sheet-actions {
    display: grid;
    gap: var(--space-2);
  }

  .narrative-mobile-sheet-actions a,
  .narrative-mobile-sheet-edit button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    padding-inline: var(--space-3);
    font-weight: var(--typography-weight-semibold);
    text-align: center;
  }

  .narrative-mobile-sheet-actions a {
    background: var(--color-brand-strong);
    color: var(--color-surface);
    text-decoration: none;
  }

  .narrative-mobile-sheet-edit {
    margin: 0;
  }

  .narrative-mobile-sheet-edit button {
    width: 100%;
  }

  .narrative-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: none;
  }

  .narrative-mobile a:focus-visible,
  .narrative-mobile button:focus-visible,
  .narrative-mobile input:focus-visible,
  .narrative-mobile summary:focus-visible {
    outline: 3px dashed var(--color-focus);
    outline-offset: 3px;
  }

  html.narrative-mobile-sheet-open,
  html.narrative-mobile-sheet-open body {
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .narrative-mobile-horizons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 300px) {
  .narrative-mobile-scope-selector > summary,
  .narrative-mobile-custom,
  .narrative-mobile-repartition-row > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .narrative-mobile-scope-selector > summary,
  .narrative-mobile-repartition-row > div,
  .narrative-mobile-panel-head,
  .narrative-mobile-day-top,
  .narrative-mobile-segment > div,
  .narrative-mobile-week-group > header {
    display: grid;
  }

  .narrative-mobile-date-nav {
    gap: var(--space-1);
  }

  .narrative-mobile-events > li {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }
}


@media (max-width: 900px) and (hover: hover) and (pointer: fine) {
  .narrative-mobile-event-card:hover,
  .narrative-mobile-allday-card:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 900px) and (forced-colors: active) {
  .narrative-mobile-event-card,
  .narrative-mobile-allday-card,
  .narrative-mobile-controls,
  .narrative-mobile-panel,
  .narrative-mobile-summary,
  .narrative-mobile-sheet,
  .narrative-mobile-sheet-close {
    border-color: ButtonText;
  }

  .narrative-mobile-event-card.is-selected,
  .narrative-mobile-allday-card.is-selected {
    border-block-color: Highlight;
    border-inline-end-color: Highlight;
    box-shadow: none;
  }

  .narrative-mobile a:focus-visible,
  .narrative-mobile button:focus-visible,
  .narrative-mobile input:focus-visible,
  .narrative-mobile summary:focus-visible {
    outline-color: Highlight;
  }
}

/* #1015 — one shared toolbar carries the same semantics on compact viewports. */
@media (max-width: 900px) {
  .narrative-unified-toolbar {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .narrative-unified-toolbar .narrative-command-bar {
    display: flex;
    justify-content: flex-end;
  }

  .narrative-controls--unified {
    min-width: 0;
    display: grid;
    gap: var(--space-3);
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-surface);
    padding: var(--space-3);
    background: var(--color-surface);
  }

  .narrative-filter-group--scope,
  .narrative-filter-grid,
  .narrative-filter-grid > .narrative-filter-group {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
  }

  .narrative-filter-grid {
    grid-template-columns: 1fr;
  }

  .narrative-filter-grid > .narrative-filter-group {
    border-top: var(--border-width-default) solid var(--color-line);
    padding-top: var(--space-3);
  }

  .narrative-control-label {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-ink);
    font-size: var(--typography-size-meta);
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-control-label .narrative-icon,
  .narrative-filter-toggle .narrative-icon {
    width: 18px;
    height: 18px;
    flex: none;
  }

  .narrative-scope,
  .narrative-horizons,
  .narrative-involvement {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  .narrative-scope button,
  .narrative-horizons a,
  .narrative-involvement a,
  .narrative-reference-trigger,
  .narrative-filter-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    box-sizing: border-box;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    padding: 0 var(--space-3);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--typography-size-caption);
    font-weight: var(--typography-weight-semibold);
    text-decoration: none;
  }

  .narrative-scope button[aria-pressed="true"] {
    border-color: var(--color-ink);
    background: var(--color-ink);
    color: var(--color-surface);
  }

  .narrative-horizons a[aria-current="page"],
  .narrative-involvement a[aria-current="page"],
  .narrative-filter-toggle[aria-pressed="true"] {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
    color: var(--color-brand-strong);
  }

  .narrative-reference-selector {
    min-width: 0;
    position: relative;
  }

  .narrative-reference-trigger,
  .narrative-filter-toggle {
    width: 100%;
  }

  .narrative-reference-trigger {
    justify-content: flex-start;
  }

  .narrative-range-picker[hidden] {
    display: none;
  }

  .narrative-range-picker {
    width: 100%;
    position: static;
    display: grid;
    gap: var(--space-2);
    box-sizing: border-box;
    margin-top: var(--space-2);
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-surface);
    padding: var(--space-3);
    background: var(--color-surface);
  }

  .narrative-range-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: var(--space-2);
  }

  .narrative-range-header strong {
    text-align: center;
    text-transform: capitalize;
  }

  .narrative-range-month-button,
  .narrative-range-actions button {
    min-height: 44px;
  }

  .narrative-range-calendar {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
  }

  .narrative-range-calendar th {
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-range-day {
    width: 100%;
    min-height: 42px;
    border: var(--border-width-default) solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-ink);
  }

  .narrative-range-day.is-in-range {
    background: var(--color-brand-soft);
  }

  .narrative-range-day.is-range-start,
  .narrative-range-day.is-range-end {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-surface);
    font-weight: var(--typography-weight-semibold);
  }

  .narrative-range-footer,
  .narrative-range-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .narrative-range-footer {
    justify-content: space-between;
    border-top: var(--border-width-default) solid var(--color-line);
    padding-top: var(--space-2);
    color: var(--color-muted);
    font-size: var(--typography-size-caption);
  }

  .narrative-unified-toolbar a:focus-visible,
  .narrative-unified-toolbar button:focus-visible,
  .narrative-unified-toolbar input:focus-visible {
    outline: 3px dashed var(--color-focus);
    outline-offset: 3px;
  }
}

@media (max-width: 900px) and (forced-colors: active) {
  .narrative-controls--unified,
  .narrative-reference-trigger,
  .narrative-filter-toggle,
  .narrative-scope button,
  .narrative-horizons a,
  .narrative-involvement a,
  .narrative-range-picker,
  .narrative-range-day {
    border-color: ButtonText;
  }

  .narrative-filter-toggle[aria-pressed="true"],
  .narrative-range-day.is-range-start,
  .narrative-range-day.is-range-end {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
}